Grid

CSS Grid Layout (Grid) - это двумерная система построения макетов в CSS, позволяющая разработчикам создавать сложные сеточные структуры, управляя одновременно расположением элементов по строкам и колонкам, с возможностью точного контроля над позиционированием, выравниванием и перекрытием элементов без использования дополнительных HTML-обёрток или JavaScript.

Термин используется в веб-разработке, frontend-вёрстке, UI/UX-дизайне и при создании сложных адаптивных интерфейсов. Например, разработчик новостного портала создаёт главную страницу с сеткой, где первая новость занимает всю ширину и большую высоту, следующие четыре - по 2 в строке, а правый сайдбар растягивается на всю высоту сетки, независимо от содержимого. При этом на мобильной версии вся структура перестраивается в одну колонку, а порядок элементов меняется без изменения HTML-кода.

Спецификация CSS Grid Layout была разработана рабочей группой CSS под руководством Microsoft, которая первой реализовала экспериментальную версию Grid в Internet Explorer 10 в 2012 году. В 2017 году все основные браузеры (Google Chrome, Firefox, Safari, Microsoft Edge) выпустили стабильные версии с полной поддержкой Grid, что стало поворотным моментом в веб-вёрстке.

Кратко

CSS Grid - это способ раскладывать элементы на веб-странице в виде таблицы с гораздо большими возможностями. Задаются строки и колонки, затем указывается, какой элемент где должен находиться: они могут занимать одну ячейку, несколько, перекрываться и менять порядок без изменения HTML.

Что такое CSS Grid Layout

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

Ключевые понятия Grid:

• Grid container (грид-контейнер) - элемент с display: grid или display: inline-grid.
• Grid items (грид-элементы) - прямые дочерние элементы грид-контейнера.
• Grid tracks (грид-треки) - общее название для строк (rows) и колонок (columns) сетки.
• Grid lines (грид-линии) - разделительные линии между треками. Нумеруются с 1 до N+1.
• Grid cell (грид-ячейка) - единичная ячейка сетки, образованная пересечением одной строки и одной колонки.
• Grid area (грид-область) - прямоугольная область, объединяющая несколько ячеек.

В отличие от табличной вёрстки, где структура задаётся в HTML, Grid задаётся полностью в CSS, оставляя HTML семантически чистым и независимым от представления.

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

Работа с Grid строится на нескольких этапах: определение контейнера, задание структуры сетки, размещение элементов и управление адаптивностью.

1. Создание грид-контейнера

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

2. Определение структуры сетки

Структура задаётся через grid-template-columns (колонки) и grid-template-rows (строки):

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;   /* 3 колонки: 200px, гибкая, 200px */
  grid-template-rows: auto 500px;            /* 2 строки: по высоте контента, 500px */
  gap: 20px;                                 /* отступы между ячейками */
}

Единицы измерения для треков:

• px, em, rem, % - фиксированные или относительные размеры.
• fr (fraction) - гибкая единица, обозначающая долю свободного пространства.
• auto - размер по содержимому.
• minmax(min, max) - минимальный и максимальный размер.
• repeat() - повторение паттерна: repeat(3, 1fr).
• auto-fill / auto-fit - автоматическое заполнение колонками под размер контейнера.

3. Именование линий

.container {
  grid-template-columns: [start] 200px [content-start] 1fr [content-end] 200px [end];
}

4. Именование областей

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main ads"
    "footer footer footer";
}

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

5. Размещение элементов по линиям

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

/* Сокращённая запись */
.item {
  grid-area: 1 / 2 / 3 / 4;  /* row-start / col-start / row-end / col-end */
}

6. Управление выравниванием

• justify-content - выравнивание сетки по горизонтали.
• align-content - выравнивание сетки по вертикали.
• justify-items - выравнивание элементов по горизонтали внутри своих ячеек.
• align-items - выравнивание элементов по вертикали.
• justify-self - переопределяет для конкретного элемента.
• align-self - переопределяет для конкретного элемента.

7. Авто-размещение

Если элементы не размещены явно, Grid автоматически размещает их, заполняя ячейки по строкам (по умолчанию) или по колонкам (grid-auto-flow: column).

Преимущества

• Двумерный контроль: управление и строками, и колонками одновременно для сложных макетов.
• Независимость от порядка в HTML: визуальный порядок может отличаться от разметки.
• Именованные области: grid-template-areas делает код самодокументируемым.
• Гибкие единицы (fr): решение проблемы «резиновых» сеток проще процентных расчётов.
• Авто-размещение: для однотипных элементов не требуется ручное указание позиции каждого.
• Сложные перекрытия: элементы могут перекрывать друг друга.
• Адаптивность без медиазапросов: repeat(auto-fit, minmax(250px, 1fr)) создаёт сетки, адаптирующиеся к ширине экрана.

Недостатки и ограничения

• Сложность для простых макетов: для горизонтальной навигации Flexbox проще.
• Поддержка старых браузеров: Internet Explorer 10 и 11 поддерживают только устаревшую версию Grid.
• Порог входа: концепции линий, треков, областей требуют времени для освоения.
• Отладка: визуальная отладка Grid-макетов в DevTools появилась позже, чем для Flexbox.
• Сложность с динамическим контентом: при непредсказуемой высоте контента возможны переполнения.

Где используется

Тип интерфейса	Пример использования Grid
Новостные порталы и журналы	Сложные сетки с разными размерами материалов: главная новость на всю ширину, второстепенные - по 2 в строке
Дашборды и админ-панели	Размещение виджетов, графиков, таблиц в сетке с возможностью перетаскивания
Календари и расписания	Таблицы событий, где элементы могут занимать несколько ячеек
Галереи изображений	Сетки с разным соотношением сторон, где одни изображения крупнее других
Лендинги и маркетинговые страницы	Сложные макеты с чередованием текста и изображений
Карточки товаров в интернет-магазинах	Адаптивные сетки каталога с разным количеством колонок на разных разрешениях

Сравнение с альтернативными методами вёрстки

Метод	Принцип работы	Когда использовать	Ограничения
CSS Grid Layout	Двумерная сетка с контролем строк и колонок	Сложные макеты, журнальные сетки, дашборды, календари	Избыточен для простых раскладок, крутая кривая обучения
Flexbox	Однонаправленные макеты (строка или колонка)	Навигация, карточки в строку, выравнивание, распределение пространства	Не подходит для двумерных сеток
Float	Элементы вырываются из потока, обтекаются текстом	Устаревший метод, только для простых обтеканий	Требует clearfix, сложное вертикальное выравнивание
Табличная вёрстка (display: table)	Имитация HTML-таблиц	Устаревший метод, только для email-писем	Структура задаётся в HTML, неадаптивна
CSS-фреймворки (Bootstrap, Tailwind)	Готовые классы для сеток	Быстрая разработка, командная работа	Дополнительный вес CSS, ограниченная гибкость

Часто задаваемые вопросы

В чём разница между Grid и Flexbox?

Grid предназначен для двумерных макетов - контролируются и строки, и колонки одновременно. Flexbox - для однонаправленных: элементы выстраиваются в строку или колонку, а перенос на новую строку является дополнительной опцией. Grid лучше для структуры страницы в целом, Flexbox - для выравнивания элементов внутри компонентов.

Нужно ли поддерживать Internet Explorer для Grid?

IE10 и IE11 поддерживают устаревшую версию Grid с префиксом -ms-, которая несовместима с современным синтаксисом. Если проект требует поддержки IE, можно использовать @supports для предоставления Fallback на Flexbox или использовать PostCSS-плагины.

Можно ли комбинировать Grid и Flexbox?

Да, это лучшая практика. Grid используется для макроструктуры (страница, сетка каталога), а внутри грид-ячеек часто применяется Flexbox для выравнивания содержимого (кнопок, текста, иконок).

Как сделать адаптивную сетку без медиазапросов?

Используется конструкция grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));. Она создаёт колонки с минимальной шириной 250px, которые растягиваются при расширении контейнера, а количество колонок автоматически увеличивается.

Что такое единица fr в Grid?

fr (fraction) - это гибкая единица, обозначающая долю свободного пространства в контейнере после выделения места под фиксированные колонки. Например, 1fr 2fr означает, что первая колонка займёт одну часть свободного пространства, вторая - 2 части.

Связанные термины

• CSS
• Flexbox
• Веб-разработка
• Frontend
• Адаптивный дизайн
• Bootstrap
• Tailwind CSS
• UI/UX дизайн