CSS Grid Layout. Основы

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


.container {
  background-color: gray;
}

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

.box-2 {
    background-color: orange;
}

.box-3 {
    background-color: yellow;
}

.box-4 {
    background-color: green;
}

.box-5 {
    background-color: blue;
}

.box-6 {
    background-color: pink;
}

.box-7 {
    background-color: violet;
}

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

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

Блоки ведут себя ожидаемо, сверху вниз.

1
2
3
4
5
6
7

Сетка. display:grid

Добавим в контейнер свойство display:grid.


.container {
  background-color: gray;
  display: grid;
}

Ничего не изменится. Пока мы только заявили о своём намерении использовать сетку.

Столбцы. grid-template-columns

Добавим дополнительное свойство grid-template-columns


grid-template-columns: 200px auto 50px;

Мы разбили страницу на три столбца. Первый столбец имеет ширину 200 пикселей, третий столбец имеет ширину 50 пикселей, а второй столбец вычисляет свой размер автоматически. Если вы будете менять размеры страницы, то второй столбец автоматически будет сжиматься или расширяться. При желании вы можете использовать и фиксированное значение.

1
2
3
4
5
6
7

Ряды. grid-template-rows

Кроме столбцов, мы можем указать число рядов и высоту каждого ряда. Добавим grid-template-rows.


grid-template-rows: 50px 50px;

По идее у нас должна появиться сетка 2х3 (два ряда с тремя столбцами). В примере у нас использовалось семь блоков, временно оставим только шесть блоков.

1
2
3
4
5
6

Если бы мы оставили семь блоков, то седьмой перешёл бы на третий ряд самостоятельно, не обращая внимания на наше желание иметь сетку размером 2х3. Поэтому нужно следить за поведением блоков.

Другой случай - создадим сетку 3х3 из девяти квадратов, но поместим только шесть блоков.


.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
1
2
3
4
5
6

Мы видим сетку 3x2 на странице, хотя создавали сетку 3x3. Но у нас есть только шесть элементов, чтобы заполнить сетку. Если бы у нас было ещё три блока, то и нижний ряд был бы заполнен.

Промежутки. grid-gap

Не хотим, чтобы блоки прилипали друг к другу? Добавляем ещё одно свойство grid-gap.


grid-gap: 10px;
1
2
3
4
5
6

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

1
2
3
4
5
6
7
8
9

Ширина рядов по умолчанию. grid-auto-rows

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


grid-auto-rows: 100px;

Теперь по умолчанию у рядов будет высота 150 пикселей.

1
2
3
4
5
6
7
8
9

Индивидуальные промежутки. grid-column-gap/grid-row-gap

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


grid-column-gap: 20px;
grid-row-gap: 5px;
1
2
3
4
5
6
7
8
9

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

Реклама