CSS | Как задать в какой фракции будет находиться элементы контейнера grid

Question

Как сделать так что-бы block1 и block2 оказались во второй фракции, то есть в центральной? А block2 был справа снизу блока1?

        <div class="main-top-container">
    <div class="block1">
    </div>
    <div class="block2">
    </div>
</div>
<style>
    .main-top-container {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .block1 {
        width: 200px;
        height: 300px;
        background: black;
        justify-self: center;
    }
    .block2 {
        width: 100px;
        height: 150px;
        float: left;
        background: darkgray;
    }
</style>

Answer 1

Вот пример решения, основанный на том, чтобы добавить выравнивающии блоки:

.main-top-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.block1 {
  width: 200px;
  height: 300px;
  background: black;
  justify-self: center;
}

.block2 {
  width: 100px;
  height: 150px;
  float: right;
  background: darkgray;
}

.block1-empty {
  width: 200px;
  height: 300px;
  justify-self: center;
}

.block2-empty {
  width: 100px;
  height: 150px;
  float: right;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="description" content="Пример с выравнивающими блоками" />
  <meta charset="utf-8">
  <title>Пример</title>
  <meta name="author" content="ВЫ">
</head>

<body>

  <div class="main-top-container">
    <div></div>
    <div class="block1">
    </div>
    <div class="block2-empty">
    </div>
    <div></div>
    <div class="block1-empty">
    </div>
    <div class="block2">
    </div>
  </div>

</body>

</html>

Выравнивающие блоки нужны, т.к. внешний контейнер задан со свойством grid-template-columns: repeat(3, 1fr); (описание на английском)

БЛОГ НА HUSL

CSS | Как задать в какой фракции будет находиться элементы контейнера grid

Ответы (1 шт):