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

Введение

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

Базовые концепции

Грид-контейнер создаётся одним свойством:

.container {
  display: grid;
  /* или inline-grid для строчного контейнера */
}

Все прямые дочерние элементы автоматически становятся грид-элементами.

Определение колонок и строк

Свойства grid-template-columns и grid-template-rows задают структуру сетки:

.container {
  display: grid;
  /* три колонки: фиксированная, гибкая, фиксированная */
  grid-template-columns: 200px 1fr 200px;
  /* две строки фиксированной высоты */
  grid-template-rows: 80px 1fr;
  gap: 16px;
}

Единица fr (fraction) означает долю свободного пространства. Запись 1fr 2fr 1fr создаёт три колонки в соотношении 1:2:1.

Функция repeat()

Для повторяющихся треков используется repeat():

.grid {
  /* 12 равных колонок */
  grid-template-columns: repeat(12, 1fr);
  /* чередование фиксированной и гибкой */
  grid-template-columns: repeat(3, 100px 1fr);
}

Ключевые слова auto-fill и auto-fit

.responsive-grid {
  /* автоматически создаёт столько колонок, сколько помещается */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
}

Разница между auto-fill и auto-fit: первый сохраняет пустые треки, второй сжимает их до нуля, растягивая заполненные элементы.

Размещение элементов

По номерам линий

Грид-линии нумеруются с 1. Элемент можно растянуть через несколько ячеек:

.header {
  /* от первой до последней линии по горизонтали */
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

.sidebar {
  grid-column: 1 / 2;
  /* от второй строки, занимает 3 трека */
  grid-row: 2 / span 3;
}

.main {
  grid-column: 2 / -1;
  grid-row: 2 / -1;
}

Именованные области

Наиболее читаемый способ описания макета:

.layout {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    aside"
    "footer  footer  footer";
  min-height: 100vh;
  gap: 0;
}

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

Выравнивание

Grid поддерживает два уровня выравнивания: всего содержимого внутри контейнера и каждого элемента в его ячейке.

.container {
  /* выравнивание всей сетки внутри контейнера */
  justify-content: center;  /* по горизонтали */
  align-content: start;     /* по вертикали */

  /* выравнивание всех элементов в их ячейках */
  justify-items: stretch;   /* по горизонтали */
  align-items: center;      /* по вертикали */
}

.item {
  /* переопределение для конкретного элемента */
  justify-self: end;
  align-self: start;
  /* сокращение: выравнивание по обеим осям */
  place-self: center;
}

Неявная сетка

Если элементов больше, чем ячеек в явной сетке, Grid создаёт новые треки автоматически:

.auto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* размер автоматически создаваемых строк */
  grid-auto-rows: minmax(120px, auto);
  /* направление автоматического потока */
  grid-auto-flow: row dense;
}

Режим dense заполняет дыры в сетке, перемещая меньшие элементы вперёд. Полезно для галерей с элементами разного размера.

Практический пример: карточная галерея

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 16px;
  padding: 16px;
}

/* широкая карточка занимает 2 колонки */
.card--wide {
  grid-column: span 2;
}

/* высокая карточка занимает 2 строки */
.card--tall {
  grid-row: span 2;
}

/* акцентная карточка занимает 2x2 */
.card--featured {
  grid-column: span 2;
  grid-row: span 2;
}

Частые ошибки

1. Использование Grid вместо Flexbox для одномерных макетов

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

2. Жёсткие пиксельные размеры вместо гибких

/* плохо: сетка сломается на маленьких экранах */
grid-template-columns: 300px 300px 300px;

/* хорошо: адаптируется к ширине контейнера */
grid-template-columns: repeat(3, 1fr);

3. Игнорирование minmax() при адаптивных сетках

/* без minmax элементы могут стать слишком узкими */
grid-template-columns: repeat(auto-fill, 1fr);

/* с minmax задаётся минимально допустимый размер */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

4. Злоупотребление отрицательными индексами линий

Запись grid-column: 1 / -1 работает только в явной сетке. В неявной (когда используется grid-auto-columns) последняя линия -1 не соответствует ожидаемому концу.

5. Забытые gap вместо устаревших grid-gap

Свойство grid-gap является устаревшим псевдонимом. Используйте стандартное gap, которое работает как в Grid, так и в Flexbox.

Заключение

CSS Grid кардинально меняет подход к построению макетов: вместо последовательных трансформаций вложенных блоков вы декларируете структуру сетки и назначаете элементам позиции. Ключевые инструменты — fr, repeat(), minmax(), grid-template-areas и auto-fill/auto-fit — решают большинство задач без медиазапросов. Для глубокого освоения важно практиковаться на реальных макетах: начните с переработки существующих Flexbox-раскладок и постепенно переходите к сложным журнальным сеткам.