CSS Grid Layout — двумерная система сетки в CSS, позволяющая размещать элементы по строкам и столбцам одновременно. Стандартизирован W3C, поддерживается всеми современными браузерами с 2017 года. Вместе с Flexbox (одномерная) образует основу современной CSS-вёрстки.
Основные концепции
Сетка задаётся на контейнере через display: grid. Строки и столбцы определяются с помощью grid-template-columns и grid-template-rows:
- fr-единицы — доля свободного пространства:
1fr 2fr 1frделит контейнер на три части (25%–50%–25%) - auto — размер по содержимому
- minmax(min, max) — гибкий диапазон:
minmax(200px, 1fr) - repeat() — повтор:
repeat(3, 1fr)= три равные колонки
Размещение элементов
grid-column и grid-row указывают, какие ячейки занимает элемент: grid-column: 1 / 3 растягивает элемент на колонки 1 и 2. Именованные области через grid-template-areas делают код читаемым:
grid-template-areas: "header header" "sidebar main" "footer footer"
Адаптивные сетки
auto-fit и auto-fill в сочетании с minmax() — рецепт адаптивной сетки без media queries: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) автоматически определяет число колонок. Это одна из самых мощных возможностей CSS Grid для responsive-дизайна.
Grid vs Flexbox
Grid идеален для двумерных макетов (карточки, страницы). Flexbox — для одномерного выравнивания (меню, строки). Часто используются вместе: Grid для общей структуры страницы, Flexbox внутри компонентов.