CSS Grid Layout. Основы

Создадим несколько блоков внутри главного контейнера.


.container1 {
  background-color: magenta;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 10px;
  padding: 20px;
  font-size: 150%;
}

<div class="container1">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>

Зададим свойства контейнеру и дочерним блокам. Пока мы не используем Grid CSS Layout. Блоки ведут себя ожидаемо, сверху вниз.

1
2
3
4
5
6
7

Добавим в контейнер свойство display:grid. Пока ничего не изменится. Нужно добавить дополнительно свойства grid-template-columns и grid-gap.


.container2 {
  display: grid;
  grid-template-columns: 200px 100px 50px;
  grid-gap: 10px;
  background-color: magenta;
  color: #444;
}

Теперь мы видим, что блоки разместились в сетке. Мы задали три разных значения для ширины столбцов и получили три столбца с разными блоками. Блоки распределяются динамически слева направо.

1
2
3
4
5
6
7

Также вы можете задать высоту каждого ряда, используя свойство grid-template-rows:


.container3 {
  ...
  grid-template-rows: 200px 150px;
  ...
}

Обратите внимание, что мы указали высоту только для двух рядов. Остальные ряды останутся со своими значениями по умолчанию.

1
2
3
4
5
6
7

Если мы хотим переопределить значение по умолчанию, то подключаем свойство grid-auto-rows:


.container4 {
  ...
  grid-auto-rows: 100px;
  ...
}
1
2
3
4
5
6
7

Для промежутков между ячейками таблицы использовалось свойство grid-gap, которое действовало между строками и столбцами. Можно указать значения индивидуально через grid-column-gap и grid-row-gap.


.container5 {
  ...
  grid-column-gap: 20px;
  grid-row-gap: 5px;
  ...
}
1
2
3
4
5
6
7

Вернуться в раздел о CSS Grid Layout

Реклама