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

Книга по CSS на рабочем столе

CSS Grid — это современная двухмерная система компоновки для веба, позволяющая управлять строками и столбцами одновременно. Используйте Grid для сложных макетов (основной контент + сайдбар, карточные сетки, панели управления). Для одномерных задач (строка или столбец) чаще удобнее Flexbox; для старой поддержки можно применять float. В статье — базовая и продвинутая синтаксика, практические советы, шаблоны, чек-листы и тест-кейсы.

Коротко о ключевых терминах

Grid-контейнер — элемент с display: grid; он управляет расположением дочерних элементов.
Grid-item — прямой потомок grid-контейнера; элемент, позиционируемый в сетке.
Ядро концепции — явные (explicit) строки/столбцы и неявные (implicit) треки, которые создаются автоматически.

Как работает CSS Grid

CSS Grid — это двухмерная система: вы задаёте шаблон строк и столбцов на контейнере, а браузер размещает внутри дочерние элементы (grid-items). Контейнер и элементы связаны напрямую: контейнер управляет треками (rows/columns), а элементы занимают ячейки этого шаблона.

Основные шаги для использования:

Сделать контейнер гридом: display: grid;
Задать структуру: grid-template-columns / grid-template-rows / grid-template-areas;
При необходимости настроить автоматические ряды/столбцы: grid-auto-rows / grid-auto-columns;
Управлять отступами между треками: gap (ранее grid-gap).

Важно: Grid отвечает за двухмерный контроль. Если нужен контроль только по одной оси — рассмотрите Flexbox.

Инициализация контейнера — пример

.container {
  display: grid;
}

.selector может быть любым — тэгом, классом или id. Главное, чтобы элемент содержал необходимые grid-items.

Простая сетка с фиксированными размерами (пиксели)

.gridContainer {
  display: grid;
  grid-template-columns: 400px 400px 400px;
  gap: 16px;
}

Это создаст три столбца по 400px. При меньшем числе дочерних элементов будут видны только существующие колонки; при большем — элементы размещаются по строкам, по 3 в строке.

Примечание: фиксированные px не адаптируются под разные размеры экранов — это плохо для адаптивности.

Используем фракции (fr) — адаптивный подход

.gridContainer {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
}

1fr и 2fr означают, что правая колонка будет в два раза шире левой, а их суммарная ширина подстроится под контейнер.

Пример применения: основной контент + сайдбар.

Управление строками: grid-template-rows и implicit rows

grid-template-rows работает аналогично колонкам: вы задаёте высоты явных строк. Но поведение implicit (неявных) строк отличается: если элементов больше, чем предусмотрено шаблоном строк, браузер создаст дополнительные (implicit) строки с высотой по умолчанию.

.gridContainer {
  display: grid;
  grid-template-rows: 1fr 3fr;
  gap: 10px;
}

Если у контейнера пять прямых детей, первые два займут явные строки 1fr и 3fr; остальные три — будут расположены в implicit строках (их высота — по умолчанию). Чтобы управлять ими, используется grid-auto-rows.

.gridContainer {
  display: grid;
  grid-template-rows: 1fr 3fr;
  grid-auto-rows: 3fr;
}

Теперь все неявные строки получат высоту 3fr.

Практичные возможности и расширенные примеры

repeat(), minmax(), auto-fill / auto-fit

repeat() упрощает повторение шаблонов

.gridContainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 колонки по фракции */
  gap: 16px;
}

minmax(min, max) задаёт диапазон: полезно для адаптивных карточек

.gridContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

auto-fill и auto-fit полезны при создании «мозаики» карточек: auto-fill заполняет ряд как можно большим числом колонок указанного minmax, оставляя пустые колонки; auto-fit «схлопывает» пустые колонки, делая сетку более компактной.

grid-template-areas — декларативное расположение

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

.gridLayout {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 12px;
}

grid-template-areas делает шаблон макета читаемым и удобным для дизайнеров и разработчиков.

Выравнивание: justify-items, align-items, justify-content, align-content

justify-items / align-items — управление выравниванием содержимого ячейки по оси.
justify-content / align-content — управление распределением свободного пространства внутри контейнера.

.gridContainer {
  display: grid;
  justify-items: center; /* горизонтальное выравнивание элементов внутри ячеек */
  align-items: start;    /* вертикальное выравнивание */
}

gap — отступы между треками (ранее grid-gap)

.gridContainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 12px; /* строка колонка */
}

Когда NOT использовать Grid — контрпримеры

Простая одномерная навигация (горизонтальный список) — лучше Flexbox.
Для тонкой адаптивной верстки отдельных компонентов внутри строчного контекста Flex может быть проще.
Старые проекты с поддержкой древних браузеров (IE11) — Grid работает, но с ограничениями; возможно, проще fallback на Flex/float.

Альтернативы и комбинации

Flexbox — идеально для одномерных макетов (строка или столбец).
Float — устаревший подход, полезен для очень старой поддержки или быстрых хитростей; не рекомендуется как основная система.
Используйте Grid + Flex: Grid для общей структуры страницы, Flex для выравнивания контента внутри карточек/блоков.

Шаблоны и готовые пресеты (cheat sheet)

Трёхколоночная адаптивная сетка

.grid-3col {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

Макет с сайдбаром и основным содержимым

.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
}

Резиновая таблица (фиксированные заголовки столбцов)

.table {
  display: grid;
  grid-template-columns: 150px 1fr 1fr 1fr;
  gap: 8px;
}

Проверки качества и критерии приёмки

Все ключевые точки адаптивности (mobile/tablet/desktop) отображают контент корректно.
Никакие важные элементы не обрезаются при изменении размеров окна.
Сетка не ломается при добавлении/удалении элементов (implicit rows handled).
Отступы между элементами соответствуют дизайн-системе.
Поддержка доступности: порядок DOM логичный, фокус-последовательность не нарушена.

Тест-кейсы (пример)

Добавить 1 элемент в .grid-3col — ожидается 1 колонка, элемент занимает всю ширину.
Добавить 6 элементов — ожидается заполнение строк по 3 колонки на desktop, перестроение на мобильных экранах.
Установить длинный контент в карточке — высота карточек не должна ломать соседние ряды (проверить align).
Тест keyboard-only: можно ли навигировать по элементам в логическом порядке.

Чек-лист по ролям

Разработчик:

Задать display: grid на контейнере.
Выбрать между fr / minmax / repeat для колонок.
Проверить implicit треки и добавить grid-auto-rows при необходимости.
Настроить gap и alignment.

Дизайнер:

Проверить макет в сетке: области (grid-template-areas) соответствуют визуалу.
Указать поведение при переполнении контента.

Тестировщик:

Прогнать тест-кейсы, проверить фоллбеки и кросс-браузерность.

Потенциальные ошибки и как их исправлять

«Элементы не выстраиваются как ожидается» — проверьте, что вы стилизуете прямых детей контейнера; вложенные контейнеры не становятся grid-items автоматически.
«Неявные строки получают неправильную высоту» — используйте grid-auto-rows.
«Проблемы с мобильной адаптацией» — замените фиксированные px на fr или minmax + media queries.

Примечание: свойство grid-auto-flow контролирует направление заполнения неявных треков (row / column / dense).

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

Grid выполняет расчёты в браузере и по скорости не уступает альтернативам при правильном использовании. Современные браузеры поддерживают CSS Grid; для очень старых версий (например IE11) потребуются префиксы и упрощённые шаблоны. Всегда проверяйте поддержку браузеров в вашем проекте.

Мини-методология: конвертация макета из float/Flex в Grid

Выделите контейнер верхнего уровня — сделайте его display: grid.
Определите колонки и строки (grid-template-*) по макету дизайна.
Замените float-логики на grid-контейнеры и уберите clearfix.
Используйте grid-template-areas для визуальной ясности.
Протестируйте адаптивность и поведение implicit треков.

Безопасность и доступность

Не полагайтесь на визуальный порядок: DOM-порядок должен соответствовать логике навигации.
Обеспечьте контраст текста и поддержите фокусные состояния для интерактивных элементов внутри grid.

Короткое резюме

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

Ключевые действия:

Инициализируйте контейнер display: grid;
Используйте fr, minmax и repeat для адаптивности;
Управляйте неявными треками через grid-auto-rows/columns;
Сочетайте Grid и Flexbox — каждый инструмент для своей задачи.

Краткие советы для публикации

Social preview (OG): используйте заголовок, описанный в метаданных, картинку из статьи.
Краткое анонс-сообщение (для рассылки): в 100–200 словах опишите, как Grid ускоряет создание макетов и даёт контроль по двум осям.

Спасибо за чтение. Если нужно — подготовлю готовые компоненты (.scss/.css) с примерами для вашего проекта.