CSS Grid: полное руководство по сеткам

CSS Grid — модуль макетирования для создания двумерных сеток. В отличие от Flexbox, Grid позволяет управлять строками и столбцами одновременно, что упрощает сложные раскладки. В этой статье рассмотрены все основные свойства CSS Grid с практическими примерами.

Основы CSS Grid

Grid работает по принципу сетки: контейнер определяет треки (строки и столбцы), элементы размещаются в ячейках. Создание grid-контейнера:

.container {
  display: grid;
}

Прямые потомки становятся grid-элементами. По умолчанию создаётся одна колонка, элементы выстраиваются в столбик.

Свойства grid-контейнера

grid-template-columns и grid-template-rows

Определяют размеры столбцов и строк:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
}

Единицы: px, %, fr, em, rem, auto. fr — доля свободного пространства.

repeat()

Повторение паттерна:

.container {
  grid-template-columns: repeat(3, 1fr); /* три равных столбца */
  grid-template-columns: repeat(4, 100px); /* четыре столбца по 100px */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* адаптивная сетка */
}

minmax()

Минимальный и максимальный размер трека:

.container {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

Столбцы не меньше 250px, при наличии места растягиваются равномерно.

gap (grid-gap)

Расстояние между ячейками:

.container {
  display: grid;
  gap: 1rem;
  /* или раздельно: */
  column-gap: 1rem;
  row-gap: 0.5rem;
}

justify-items и align-items

Выравнивание содержимого внутри ячеек:

Свойство	Ось	Значения
justify-items	По строкам (горизонталь)	start, end, center, stretch
align-items	По столбцам (вертикаль)	start, end, center, stretch

.container {
  justify-items: center;
  align-items: center;
}

place-items

Краткая запись: align-items justify-items:

.container {
  place-items: center;
}

justify-content и align-content

Выравнивание всей сетки внутри контейнера, когда сетка меньше контейнера:

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  justify-content: center;
  align-content: center;
  min-height: 100vh;
}

grid-auto-rows и grid-auto-columns

Размеры неявно создаваемых строк и столбцов:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

grid-auto-flow

Направление авторазмещения элементов: row (по умолчанию), column, row dense, column dense:

.container {
  grid-auto-flow: dense;
}

dense заполняет пустые ячейки более мелкими элементами.

Свойства grid-элементов

grid-column и grid-row

Размещение элемента в ячейках:

.item {
  grid-column: 1 / 3; /* с 1 по 3 линию */
  grid-row: 2 / 4;
}

.item-span {
  grid-column: span 2; /* на 2 столбца */
  grid-row: span 1;
}

grid-area

Краткая запись для grid-row-start / grid-column-start / grid-row-end / grid-column-end. Также используется с именованными областями.

justify-self и align-self

Выравнивание отдельного элемента внутри ячейки:

.item {
  justify-self: end;
  align-self: center;
}

Именованные области (grid-template-areas)

Удобный способ задать макет без явных номеров линий:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Точка (.) обозначает пустую ячейку.

Практические примеры

Адаптивная сетка карточек

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

Макет страницы

.page {
  display: grid;
  grid-template-areas:
    "nav nav"
    "aside content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr auto;
  min-height: 100vh;
}

Галерея с выделенным элементом

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  gap: 1rem;
}

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

Равноширинные колонки

.equal-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Адаптивность

.grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Инструменты

Для быстрого создания и настройки Grid используйте CSS Grid Generator на rechecker.ru. Для конвертации Grid-стилей в Tailwind — CSS в Tailwind.

Сравнение с Flexbox

Grid оптимален для двумерных раскладок. Flexbox — для одномерных (ряд или колонка). Подробнее — в Flexbox vs CSS Grid: когда что использовать.

Линии и нумерация

Grid использует нумерацию линий: границы между ячейками. При 3 столбцах есть 4 вертикальные линии (1–4). Отрицательные индексы считаются с конца: -1 — последняя линия.

.item {
  grid-column: 1 / -1; /* от первой до последней линии — вся строка */
}

Функция fit-content()

Ограничивает размер трека по содержимому:

.container {
  grid-template-columns: fit-content(300px) 1fr fit-content(300px);
}

Боковые колонки не шире 300px и подстраиваются под контент.

Поддержка браузеров

CSS Grid поддерживается во всех современных браузерах. В IE10–11 не поддерживается. Для fallback можно использовать @supports:

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@supports not (display: grid) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .container > * {
    flex: 1 1 50%;
  }
}

Производительность

Grid эффективен при типичном количестве ячеек (до сотен). При тысячах ячеек возможны задержки. Рекомендуется ограничивать размер сетки и использовать виртуализацию для длинных списков.

Дополнительные материалы

Практические примеры адаптивных макетов на Grid — в Адаптивные макеты на CSS Grid: практические примеры. Сравнение с Flexbox — в Flexbox vs CSS Grid: когда что использовать.