CSS grid layout или гриды — это набор свойств для раскладки элементов на странице или в отдельном элементе.

Чтобы включить гриды, нужно задать элементу display: grid и сетку: количество строк и столбцов, размеры и расстояния между ними. Элемент станет грид‑контейнером, а все вложенные в него элементы станут грид‑элементами и встанут по сетке:

<div class="columns">
  <div>Первая колонка</div>
  <div>Вторая колонка</div>
  <div>Первая колонка</div>
  <div>Вторая колонка</div> 
</div>
<style>
  .columns {
    /* Включаем гриды */
    display: grid;
    /* Задаём две колонки, два ряда
       и отступ между ними */
    grid-template-columns: 100px 150px;
    grid-template-rows: 100px 150px;
    gap: 18px;
  }
</style>
Первая колонка
Вторая колонка
Первая колонка
Вторая колонка

Относитесь к гридам, как к прямоугольному формату, внутри которого можно определить направляющие, грид‑линии, задав таким образом колонки и строки, и разложить в получившиеся ячейки содержимое:

Первая колонка
Вторая колонка
Первая колонка
Вторая колонка

За вертикальные направляющие, а следовательно, за количество и размер колонок отвечает свойство grid-template-columns. Задаётся в любых величинах длины: пикселях, em, rem, vw, vh и процентах от ширины родителя:

.columns {
  /* Первая колонка получит ширину в 50 пк,
     вторая — 20%, третья — всё оставшееся пространство */
  grid-template-columns: 50px 20% auto;
}
50px
20%
auto

Кроме величин длины гриды поддерживают особые ключевые слова:

Чтобы поддержать пропорциональные колонки, используют новую единицу измерения fr (от fraction). Работает также, как flex-grow во флексбоксах:

Кроме величин длины гриды поддерживают особые ключевые слова:

grid-template-columns: 1fr 1fr
Две колонки поделят контейнер пополам

grid-template-columns: 2fr 1fr
Две колонки поделят контейнер в соотношении 2:1

Единицы длины и fr можно смешивать. В этом случае пропорции посчитаются относительно свободного места, оставшегося после выделения фиксированных колонок:

.columns {
  grid-template-columns: 1fr 100px 2fr;
}
1fr
100px
2fr

Чтобы не дублировать описания одинаковых колонок, используют функцию repeat():

.columns {
  grid-template-columns: repeat(12, 1fr);
  /* То же самое, что
  grid-template-columns: 1fr 1fr ... 1fr */
  gap: 18px;
}

Например, так можно сверстать расписание лекций курса, в котором в каждой строке должно быть 5 превьюшек одинакового размера:

style.css
.schedule {
  grid-template-columns: repeat(5, 1fr);
  /* 18 пк между рядами, 9 пк между колонкамии*/
  gap: 18px 9px;
}
index.html
<div class="schedule">
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
</div>

Помимо числа колонок функция repeat() умеет работать с ключевыми словами auto-fill и auto-fit. Они создают столько колонок, сколько поместится при текущей ширине грид‑контейнера:

style.css
.schedule {
  grid-template-columns: repeat(auto-fill, 150px);
  gap: 18px 9px;
}
index.html
<div class="schedule">
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
</div>
Порастягивайте окно и обратите внимание, как меняется число колонок

Если повторять колонки с фиксированной шириной, возможна «дыра» справа: в контейнере шириной 330 пикселей и колонками шириной 100 пикселей будет 3 колонки и 30 «лишних» пикселей справа. Чтобы колонки равномерно растянулись, заняв оставшееся пространство, используют функцию minmax():

style.css
.schedule {
  /* Создаём столько колонок, чтобы 
     они заняли всю доступную ширину.
     При этом ширина колонок должна быть
     не менее 125 пк и не более 1fr */
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: 18px 9px;
}
index.html
<div class="schedule">
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
  <div><img src="..."></div>
</div>
Порастягивайте окно и обратите внимание, как меняется число колонок и правое поле

Всё описанное выше справедливо и для рядов. За их количество и размер отвечает свойство grid-template-rows:

.columns {
  /* Первая строка получит высоту в 50 пк,
     вторая — 20%, третья — всю оставшуюся
     высоту контейнера */
  grid-template-rows: 50px 20% auto;
}
50px
20%
auto

И конечно, одновременно можно задавать и колонки, и ряды:

.columns {
  grid-template-columns: 1fr 100px 2fr;
  grid-template-rows: 50px 100px;
}
1fr×50px
100×50px
2fr×50px
1fr×100px
100×100px
2fr×100px

Неявно созданные колонки и ряды

Если элементов внутри грид‑контейнера больше, чем доступных ячеек, то для них автоматически создадутся колонки и ряды:

style.css
.columns {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
}
index.html
<div class="columns">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
1
2
3
4
5
6
7

За их количество и размеры отвечают свойства grid-auto-columns и grid-auto-rows:

.columns {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  /* Пусть автоматические колонки
     равномерно делят свободное пространство */
  grid-auto-columns: 1fr;
  /* Пусть элементы раскладываются
     по колонкам */
  grid-auto-flow: column;
}
1
2
3
4
5
6
7
.columns {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  /* Пусть автоматические строки занимают 50 пк */
  grid-auto-rows: 50px;
}
1
2
3
4
5
6
7

С помощью grid-auto-columns можно собрать адаптивные колонки, равномерно делящие доступное пространство:

style.css
.cols {
  /* Включаем гриды */
  display: grid;
  /* Пусть неявные колонки
     равномерно делят свободное пространство,
     сохраняя минимальную ширину в 100 пк */
  grid-auto-columns: minmax(100px, 1fr);
  /* Пусть лишние элементы выстраиваются
     в колонки */
  grid-auto-flow: column;
  /* Задаём межколонник в 18 пк */
  gap: 18px;
  /* Растягиваем колонки по высоте */
  height: 100%;
}
index.html
<div class="cols">
  <div>Первая колонка</div>
  <div>Вто­рая колонка</div>
  <div>Тре­тья колонка</div>
  <div>Чет­вёр­тая колонка</div>
</div>
Пер­вая ко­лон­ка
Вто­рая ко­лон­ка
Тре­тья ко­лон­ка
Чет­вёр­тая ко­лон­ка

Что запомнить

Гриды — это набор свойств для раскладки элементов по заданным ячейкам внутри какого‑то контейнера. Чтобы включить гриды, используем display: grid у контейнера.

Внутри грид‑контейнера элементы раскладываются по ячейкам, заданным направляющими. Количество и размер колонок задаём с помощью grid-template-columns, количество и размер строк — grid-template-rows

Если элементов внутри грид‑контейнера больше, чем ячеек, то для них автоматически создаются неявно заданные ряды и колонки. Количество и размер таких рядов и колонок задаём с помощью grid-auto-rows и grid-auto-columns

Расстояние между строками и колонками задаём с помощью gap

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы

Свежак

Веб‑разработка

Типовые решения в вёрстке. Как сверстать гамбургерное меню

Совет Половнёва
ЧТ

Навигация

Два варианта нумерации кабинетов

Совет Бирмана 🗩+2
ВТ

Вдохновение

Как завершать проект, как улучшить упаковку кофе и как создать узнаваемый бренд

Совет А. Г.
ПН

Текст

Писать ли русскоязычные названия брендов внутри сайта в кавычках?

Совет Ильяхова
ВС

Шрифт

Как подружить шрифт и иконку

Совет Чикина
СБ

Под капотом бюро

Собрал Василий Половнёв · Веб‑разработка 4314
12 советов

А как сверстать?

Собрал Миша Нозик · Веб‑разработка 5341
11 советов