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

Фотография книги по CSS, лежащей на рабочем столе

CSS Grid — это двухмерная система раскладки для веба, которая даёт строгий, предсказуемый контроль над строками и столбцами. Используйте Grid, когда нужно одновременно управлять рядами и колонками; для однонаправленных задач остаётся flexbox или плавающие элементы. В статье — базовые свойства (display, grid-template-, grid-auto-) и практические приёмы, чек-листы, шаблоны и сценарии применения.

Важно: CSS Grid лучше всего подходит для макетов, где нужны и строки, и столбцы. Для простых одномерных рядов чаще удобнее flexbox.

Обзор: как работает CSS Grid

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

Ключевая команда для запуска Grid — присвоение display: grid; родительскому элементу. После этого вы можете задавать структуру колонок и строк, их размеры и поведение для лишних элементов.

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

Grid-контейнер — элемент с display: grid; он образует сетку.
Grid-item — прямой потомок контейнера, попадающий в ячейки сетки.
Track — строка или колонка сетки (толщина ряда/столбца).
Implicit grid — автоматически создаваемые треки, когда элементов больше, чем описано явно.

Основные свойства (короткий список)

display: grid;
grid-template-columns
grid-template-rows
grid-auto-rows
grid-gap / column-gap / row-gap
grid-column, grid-row (для позиционирования элементов)
justify-items, align-items, justify-content, align-content

Как инициализировать Grid: пример

selector {
    display: grid;
}

«selector» может быть тегом, классом или id — важна прямая идентификация контейнера.

Когда вы включаете Grid, поведение дочерних элементов по умолчанию остаётся схожим с вертикальным потоком (они располагаются в порядке документа). Чтобы изменить распределение, используйте grid-template-columns и grid-template-rows.

grid-template-columns: варианты задания колонок

Это свойство управляет количеством и размерами колонок. Ниже — три подхода: фиксированные размеры, доли (fr) и автоматические/адаптивные значения.

Фиксированные значения в пикселях

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

Плюс: предсказуемо на больших экранах. Минус: неадаптивно. Если в контейнере меньше элементов, чем колонок — пустые треки останутся. Если больше — элементы перейдут на новую строку по правилам авторазмещения.

Значения в фракциях (fr) — рекомендовано для адаптивности

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

1fr и 2fr означают доли свободного пространства: правая колонка всегда будет вдвое шире левой независимо от ширины экрана. Это полезно для макетов типа «контент + сайдбар».

Автоматическое повторение и minmax

Для адаптивной сетки часто используют repeat() и minmax():

.gridContainer {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

repeat(3, …) создаёт три колонки, а minmax гарантирует минимальную ширину 200px и гибкость до 1fr при увеличении.

grid-template-rows: строки и явные/неявные ряды

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

Пример

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

Если в контейнере пять непосредственных дочерних

, первые два получат высоты 1fr и 3fr. Остальные три будут размещены в неявных рядах и сохранят свою высоту по умолчанию, если их не переопределить.

grid-auto-rows: управление неявными строками

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

grid-auto-rows задаёт высоту для всех последующих неявных рядов. Вместе с grid-auto-flow и auto-placements это даёт контроль над поведением при переполнении.

Поведение при переполнении и размещение элементов

Grid поддерживает автоматическое и ручное размещение. Автоматическое размещение заполняет ячейки по порядку. Для точного позиционирования используйте grid-column и grid-row:

.item {
  grid-column: 1 / 3; /* занимает колонки с 1-й до 3-й (не включая 3) */
  grid-row: 2;        /* занимает 2-ю строку */
}

Можно указывать номера, именованные линии (line names) или пространства (span).

Когда Grid — хороший выбор, а когда нет (контрпримеры)

Хорошо: сложные макеты страниц, дашборды с таблицами виджетов, лендинги с несколькими колонками и рядами.
Не подходит: простые списки навигации в одну линию — здесь flexbox проще и понятнее.
Плавающие элементы (float) остаются релевантны для старых проектов с ограниченной поддержкой браузеров или быстрых «плавающих» текстовых обтеканий.

Пример провала: если нужна простая горизонтальная навигация с равномерными пунктами, flexbox даст лучшее поведение по оси и меньше свойств.

Практическая методика внедрения Grid (mini-методология)

Определите, требуется ли двухмерная раскладка. Если да — используйте Grid.
Назначьте контейнеру display: grid;
Опишите основные треки: grid-template-columns и grid-template-rows;
Добавьте отступы через gap / row-gap / column-gap;
Проверьте переполнение: задайте grid-auto-rows и grid-auto-flow при необходимости;
Позиционируйте критичные элементы через grid-column / grid-row;
Тестируйте на разных разрешениях и в сценах с разным количеством контента.

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

Дизайнер

Уточнить желаемое поведение колонок и рядов на ключевых breakpoint’ах.
Предоставить макет с приоритетом контента.
Проверить визуальные отступы и выравнивание.

Фронтенд-разработчик

Назначить display: grid; и базовые треки.
Использовать fr/minmax/repeat для адаптивности.
Добавить fallbacks, если проект требует поддержки старых браузеров.
Покрыть unit-тесты или визуальные скриншот-тесты для важных страниц.

Продакт/Владелец

Подтвердить приоритет контента при сжатии экрана.
Согласовать поведение сайдбаров/модулей при переполнении.

Шпаргалка (cheat sheet)

display: grid; — включаем сетку.
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); — адаптивная сетка колонок.
gap: 16px; — универсальный отступ между треками.
grid-auto-rows: auto | minmax(100px, auto); — управляет неявными рядами.
grid-column: 1 / -1; — занять всю ширину контейнера.

Сравнение: Grid vs Flexbox vs Float

Задача	Grid	Flexbox	Float
Двумерные макеты (ряды и колонки)	Отлично	Частично	Плохо
Одномерные списки/ленты	Хорошо	Отлично	Пригодно
Простая адаптивность	Хорошо	Хорошо	Плохо
Поддержка старых браузеров	Средняя	Отлично	Отлично

Примеры конфигураций

Адаптивная карточная сетка (автоподстройка под ширину контейнера):

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

Макет контент + сайдбар:

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

Критерии приёмки (acceptance)

Макет соответствует макету дизайнера при ширине экрана 320/768/1280 px.
Контент не перекрывается и не выходит за границы контейнера.
При уменьшении количества элементов сетка корректно заполняет доступное пространство и не оставляет непреднамеренных пустых треков.
Сайдбар переносится под основной контент на мобильных ширинах, если это предусмотрено дизайнером.

Тест-кейсы и проверки

Добавить/удалить элементы: поведение не должно ломать сетку.
Изменить содержимое (текст, картинки): треки не должны неожиданно расширяться.
Поверка в разных браузерах и на реальных устройствах.

Сценарии, когда нужно использовать grid-auto-rows

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

Факто-бокс (ключевые факты)

Grid — двумерная система раскладки: строки + колонки.
fr — единица, означающая долю свободного пространства.
repeat(), minmax(), auto-fit/auto-fill — стандартные инструменты для адаптивных сеток.
grid-auto-rows управляет неявными строками при переполнении.

Типичные ошибки и как их избегать

Ошибка: использование фиксированных px для всех треков. Исправление: применять fr или minmax для адаптивности.
Ошибка: ожидание, что строки автоматически переложатся в колонки. Исправление: спланировать явные треки или использовать auto-placement и media queries.
Ошибка: сложное позиционирование без именованных линий приводит к хрупкости. Исправление: использовать именованные линии или CSS custom properties для гибкости.

Стабильность и совместимость

Современные браузеры поддерживают большинство возможностей Grid. Для проектов с требованием поддержки очень старых версий (IE11) рассмотрите полифиллы или резервный вариант на flexbox/float для критичных страниц.

Короткий глоссарий

fr — фракционная единица доли свободного пространства.
Track — строка или колонка в сетке.
Implicit grid — автоматически созданные треки при переполнении.

Краткое руководство внедрения в проект (SOP)

Проведите инвентаризацию страниц и определите, где нужен Grid.
Разработайте базовые переменные (gap, breakpoints, минимальная ширина карточки).
Создайте компонентную библиотеку с Grid-шаблонами (cards, layout, sidebar).
Добавьте тесты на визуальные регрессии и сценарии переполнения.
Документируйте примеры использования для команды.

Когда использовать альтернативы

Flexbox — для одномерных осей (ряд или колонка).
Плавающие элементы — только в ретро-проектах или когда нужна обтекание текста вокруг изображений.

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

CSS Grid — мощный и предсказуемый инструмент для создания двухмерных макетов. Он сокращает количество хака и вспомогательных обёрток, даёт явное управление треками и упрощает адаптивность. Тем не менее, для простых одномерных задач продолжайте использовать flexbox. Планируйте структуру заранее, применяйте fr/minmax/repeat и тестируйте поведение при переполнении.

Важно: начните с простых примеров и постепенно добавляйте уровни сложности — это лучшая профилактика багов и визуальных расхождений.

Список ключевых шагов для быстрой проверки: