CSS Grid

CSS Grid (CSS Grid Layout) — это модуль каскадных таблиц стилей (CSS), предназначенный для создания двумерных макетов веб-страниц. Он позволяет разработчикам одновременно управлять расположением элементов как по строкам, так и по столбцам, обеспечивая гибкое и предсказуемое позиционирование контента в сетке. CSS Grid является частью спецификации CSS3 и широко поддерживается современными браузерами.

История

Разработка модуля CSS Grid Layout началась в 2011 году в рамках рабочей группы CSS (CSS Working Group) при Консорциуме Всемирной паутины (W3C). Первые черновики спецификации были опубликованы в 2012 году. Основной целью создания CSS Grid было преодоление ограничений существующих методов верстки, таких как таблицы, флоаты (float) и флексбокс (Flexbox), которые либо не обеспечивали полноценного двумерного управления, либо требовали сложных обходных путей.

В 2015 году спецификация CSS Grid достигла статуса «Кандидат в рекомендации» (Candidate Recommendation). В 2017 году модуль был официально принят как «Рекомендация W3C» (W3C Recommendation). Начиная с 2017 года, основные браузеры (Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge) внедрили полную поддержку CSS Grid. Это сделало его стандартным инструментом для создания сложных макетов без использования сторонних библиотек или фреймворков.

Основные понятия

Контейнер сетки (Grid Container)

Элемент, к которому применяется свойство display: grid или display: inline-grid. Он становится родительским элементом для всех дочерних элементов, которые автоматически становятся элементами сетки (grid items).

Элемент сетки (Grid Item)

Дочерний элемент контейнера сетки. Каждый элемент сетки может занимать одну или несколько ячеек сетки.

Линии сетки (Grid Lines)

Разделительные линии, которые образуют сетку. Они бывают горизонтальными (строки) и вертикальными (столбцы). Линии нумеруются, начиная с 1, и могут иметь имена.

Ячейка сетки (Grid Cell)

Пространство между четырьмя соседними линиями сетки (двумя горизонтальными и двумя вертикальными). Это минимальная единица сетки.

Область сетки (Grid Area)

Прямоугольная область, состоящая из одной или нескольких ячеек сетки. Области могут быть заданы с помощью именованных областей.

Треки сетки (Grid Tracks)

Строки (row tracks) и столбцы (column tracks) сетки. Каждый трек определяется расстоянием между двумя соседними линиями.

Свойства CSS Grid

Свойства для контейнера

display

Определяет, что элемент является контейнером сетки. Значения:

• grid — блочный контейнер.
• inline-grid — строчно-блочный контейнер.

grid-template-columns и grid-template-rows

Задают количество и размеры столбцов и строк сетки. Значения могут быть заданы в пикселях, процентах, fr (дробная единица), auto или с помощью функций minmax(), repeat() и других.

Пример: ``css grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 100px auto 100px; ``

grid-template-areas

Позволяет задавать имена областям сетки, используя строки символов. Каждая строка соответствует строке сетки, а каждое имя в строке — столбцу.

Пример: ``css grid-template-areas: "header header header" "sidebar content content" "footer footer footer"; ``

gap (ранее grid-gap)

Задает расстояние между строками и столбцами сетки. Может быть задано одно или два значения (для строк и столбцов соответственно).

Пример: ``css gap: 10px 20px; ``

justify-items и align-items

Управляют выравниванием элементов сетки по горизонтали (justify-items) и вертикали (align-items) внутри их ячеек. Возможные значения: start, end, center, stretch.

justify-content и align-content

Управляют выравниванием всей сетки внутри контейнера по горизонтали и вертикали. Используются, когда размеры сетки меньше размеров контейнера.

Свойства для элементов

grid-column и grid-row

Определяют, какие столбцы и строки занимает элемент. Значения задаются в виде start-line / end-line или с помощью ключевого слова span.

Пример: ``css grid-column: 1 / 3; grid-row: 2 / 4; ``

grid-area

Сокращенное свойство, которое позволяет задать положение элемента с помощью линий или имени области.

Пример: ``css grid-area: header; ``

justify-self и align-self

Переопределяют выравнивание для конкретного элемента сетки.

Функции и ключевые слова

fr (fractional unit)

Дробная единица, которая распределяет свободное пространство между треками пропорционально указанным значениям. Например, 1fr 2fr означает, что второй столбец будет в два раза шире первого.

minmax()

Функция, задающая минимальный и максимальный размер трека. Например, minmax(100px, 1fr) означает, что трек будет не менее 100 пикселей, но может растягиваться до оставшегося пространства.

repeat()

Функция, позволяющая повторять шаблон треков несколько раз. Например, repeat(3, 1fr) создает три столбца равной ширины.

auto-fill и auto-fit

Ключевые слова, используемые с repeat(). auto-fill заполняет контейнер максимальным количеством треков заданного размера, а auto-fit схлопывает пустые треки, подгоняя их под содержимое.

Примеры использования

Базовый макет с шапкой, подвалом и боковой панелью

``css .container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr 100px; grid-template-areas: "header header" "sidebar content" "footer footer"; gap: 10px; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .footer { grid-area: footer; } ``

Адаптивная сетка без медиазапросов

``css .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } ``

Сравнение с Flexbox

CSS Grid и Flexbox не являются взаимоисключающими, а дополняют друг друга. Основные различия:

• Flexbox — одномерный макет (работает либо по строке, либо по столбцу). Подходит для выравнивания элементов в одном направлении, например, для навигационных панелей или списков.
• CSS Grid — двумерный макет (одновременно управляет строками и столбцами). Идеален для сложных макетов страниц, галерей, дашбордов.

На практике часто используется комбинация: CSS Grid для общего макета страницы, а Flexbox для выравнивания элементов внутри отдельных ячеек сетки.

Поддержка браузерами

CSS Grid поддерживается всеми современными браузерами, начиная с версий:

• Google Chrome 57 (2017)
• Mozilla Firefox 52 (2017)
• Apple Safari 10.1 (2017)
• Microsoft Edge 16 (2017)
• Opera 44 (2017)

В Internet Explorer 11 и более ранних версиях поддержка CSS Grid отсутствует. Для обеспечения совместимости с устаревшими браузерами могут использоваться полифиллы или альтернативные методы верстки.

Инструменты разработчика

Современные браузеры предоставляют встроенные инструменты для визуализации и отладки CSS Grid. В Google Chrome и Mozilla Firefox в панели разработчика можно отобразить линии сетки, имена областей и размеры треков. Это упрощает создание и отладку макетов.

Источники

• W3C CSS Grid Layout Module Level 1 Specification
• MDN Web Docs: CSS Grid Layout
• CSS-Tricks: A Complete Guide to Grid
• Can I Use: CSS Grid Layout