Все свойства модуля CSS Grid Layout: исчерпывающее руководство по мощнейшему инструменту верстки

Создание grid-контейнера: display: grid / inline-grid

Любая работа с Grid начинается с объявления контейнера. Это базовое свойство, которое преобразует любой HTML-элемент в grid-контейнер и активирует все нижеописанные возможности для его прямых потомков (grid-элементов).

.grid_container {
    display: grid;
}
.grid_element {
    margin: 5px;
}

grid-template-columns

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

Фиксированные размеры (px): grid-template-columns: 200px 150px 300px; создаст три колонки с указанной шириной.

Динамические единицы (%): grid-template-columns: 20% 50% 30%; создаст колонки, общая ширина которых равна 100% ширины контейнера.

Единица fr (fraction - доля): это уникальная для Grid единица, которая распределяет свободное пространство пропорционально. Например, grid-template-columns: 1fr 3fr 1fr; создаст три колонки, где центральная будет в три раза шире боковых, независимо от размера контейнера.

Функция repeat(): позволяет сократить запись при создании повторяющихся шаблонов. grid-template-columns: repeat(4, 100px); эквивалентно 100px 100px 100px 100px;. Можно комбинировать: 1fr repeat(2, 200px) 1fr;.

Функция minmax(): задаёт диапазон допустимых размеров для трека. grid-template-columns: minmax(200px, 1fr) 2fr; означает, что первая колонка не может быть уже 200px, но может растягиваться на долю свободного пространства, в то время как вторая всегда будет в два раза шире оставшегося места.

Именование линий: мы можете давать имена сетевым линиям для более понятного позиционирования элементов в будущем: [main-start] 1fr [content-start] 2fr [content-end] 1fr [main-end].

.grid_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.grid_element {
    margin: 15px;
}

grid-template-rows

Свойство grid-template-rows - это свойство является прямой параллелью grid-template-columns, но отвечает за определение структуры сетки по горизонтали. Оно позволяет вам явно задать количество, высоту и схему всех строк в вашем grid-контейнере. В то время как ширина сетки часто является динамической, управление высотой строк с помощью этого свойства критически важно для создания макетов с предсказуемой вертикальной ритмикой.

Контроль высоты: grid-template-rows: 80px 1fr 120px; создаёт макет с фиксированным заголовком (80px), основным содержимым, занимающим всё оставшееся пространство (1fr), и фиксированным подвалом (120px). Это классическая схема "header-main-footer".

Использование fr и minmax(): grid-template-rows: minmax(100px, auto) 1fr; создаёт первую строку, высота которой будет не менее 100px, но может увеличиваться (auto), если контент требует этого, и вторую строку, занимающую всё оставшееся пространство.

Комбинация с repeat(): grid-template-rows: repeat(3, minmax(150px, auto)); создаёт три строки, каждая из которых имеет адаптивную высоту, подстраивающуюся под контент, но не менее 150px. Идеально для галерей или карточек товаров.

Важность контекста: Если суммарная высота всех строк, заданных через grid-template-rows, меньше высоты контейнера, свойство align-content определяет, как всё это пространство будет распределено.

.grid_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
}
.grid_element {
    margin: 15px;
}

grid-template-areas

Свойство grid-template-areas - предоставляет уникальный, визуальный и семантически насыщенный способ описания макета страницы непосредственно в CSS. Вместо работы с абстрактными номерами линий вы "рисуете" схему вашего макета, присваивая каждому участку сетки осмысленное имя.

Объявление областей: Каждая строка в объявлении заключается в кавычки и представляет собой строку сетки.

Создание областей: Повторяющееся имя в пределах одной строки или across нескольких строк объединяет ячейки в одну именованную область. Например, "header header header" создаст область header, занимающую все три колонки в этой строке.

Пустые ячейки: Чтобы оставить ячейку пустой, используется точка (.) или последовательность точек. "sidebar . content" создаст строку с тремя колонками: sidebar, пустой ячейкой и content.

Связь с элементами: Чтобы поместить элемент в определённую область, ему задаётся свойство grid-area с соответствующим именем: .header { grid-area: header; }.

.grid_container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 100px 250px 100px;
    grid-template-areas: 'sidebar header'
                        'sidebar content'
                        'sidebar footer';
}
.sidebar, .header, .content, .footer {
    margin: 15px;
}
.sidebar {
    grid-area: sidebar;
}
.header {
    grid-area: header;
}
.content {
    grid-area: content;
}
.footer {
    grid-area: footer;
}

grid-template

Свойство grid-template - это комплексное свойство-сокращение (shorthand) в CSS Grid Layout, которое позволяет одновременно задавать несколько параметров сетки в одной декларации. Оно объединяет в себе три фундаментальных свойства для определения явной сетки: grid-template-areas, grid-template-rows и grid-template-columns.

Свойство grid-template имеет несколько форм синтаксиса, каждая из которых предназначена для разных сценариев создания макета.

.grid_container {
    display: grid;
    grid-template: 'sidebar header' 100px
                'sidebar content' 250px
                'sidebar footer' 100px / 200px 1fr;
}
.sidebar, .header, .content, .footer {
    margin: 15px;
}
.sidebar {
    grid-area: sidebar;
}
.header {
    grid-area: header;
}
.content {
    grid-area: content;
}
.footer {
    grid-area: footer;
}

row-gap

Это свойство даёт точечный контроль именно над вертикальными промежутками между строками grid-сетки. Оно является составной частью свойства gap и должно использоваться, когда вам нужно независимо управлять только вертикальными отступами. Особенно полезно в сочетании с grid-auto-rows, где автоматически создаваемые строки также будут разделены этим промежутком.

.grid_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 0px;
}

column-gap

Это свойство является парным к row-gap и предоставляет точечный контроль именно над горизонтальными промежутками между колонками grid-сетки. Оно позволяет независимо от вертикальных отступов настроить "воздух" между элементами по горизонтали. Часто используется в карточных макетах или галереях для создания равномерных отступов между элементами в строке.

.grid_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0px;
}

gap

Это свойство-сокращение (shorthand), которое одновременно задаёт расстояния между строками и колонками grid-сетки. Оно пришло на смену устаревшим grid-gap и является современным стандартом. gap создаёт визуальное разделение между ячейками, не затрагивая внешние отступы самого контейнера или внутренние отступы элементов.

Одно значение: gap: 20px; устанавливает и row-gap, и column-gap равными 20 пикселям.

Два значения: gap: 15px 30px; первое значение задаёт row-gap (вертикальные промежутки), второе — column-gap (горизонтальные промежутки).

Визуальный эффект: Эти промежутки ведут себя как "толстые" линии сетки: они добавляют пространство между ячейками, но не перед первой или после последней ячейки.

.grid_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px 0px;
}

grid-auto-flow

Свойство grid-auto-flow - управляет алгоритмом автоматического размещения элементов. Оно определяет, как браузер будет располагать grid-элементы, которые вы не разместили явно с помощью свойств вроде grid-column или grid-row.

dense - это ключевое слово можно добавлять к любому из основных значений (row dense или column dense). Оно включает "плотный" алгоритм заполнения. Если после размещения крупного элемента в потоке остаётся пустая ячейка, система проверит, не может ли один из следующих элементов (меньшего размера) занять эту ячейку, и, если может, поместит его туда, даже если это нарушит исходный порядок в HTML. Это мощный инструмент для ликвидации нежелательных "дыр" в макете.то ключевое слово можно добавлять к любому из основных значений (row dense или column dense). Оно включает "плотный" алгоритм заполнения. Если после размещения крупного элемента в потоке остаётся пустая ячейка, система проверит, не может ли один из следующих элементов (меньшего размера) занять эту ячейку, и, если может, поместит его туда, даже если это нарушит исходный порядок в HTML. Это мощный инструмент для ликвидации нежелательных "дыр" в макете.

.grid_container {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: row;
}
.grid_element:nth-child(4) {
    grid-column: span 2;
}

grid-auto-rows

Свойство grid-auto-rows - определяет размер неявно создаваемых строк. Неявные строки появляются, когда элементов больше, чем явно заданных строк, или когда элементы размещаются в строках, которых нет в явной сетке. Применение: grid-auto-rows: 80px; — самая частая практика, создающая ряды карточек или элементов списка одинаковой высоты. grid-auto-rows: minmax(100px, auto); — создаёт строки высотой не менее 100px, но способные растягиваться под контент. Идеально для динамического содержимого.

.grid_container {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: 100px;
    grid-auto-rows: auto;
}

grid-auto-columns

Свойство grid-auto-columns - определяет размер неявно создаваемых колонок. Неявные колонки возникают тогда, когда grid-элементы размещаются за пределами явно заданной сетки (например, с помощью grid-column: 5; при наличии только 3 явных колонок) или когда алгоритм автоматического потока (grid-auto-flow: column) создаёт новые колонки для размещения элементов. Например: grid-auto-columns: 100px; означает, что любая автоматически созданная колонка будет иметь ширину 100 пикселей. Можно использовать minmax() для создания гибких автоматических треков: grid-auto-columns: minmax(150px, auto);.

.grid_container {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(2, 100px);
    grid-auto-flow: column;
    grid-auto-columns: auto;
}

justify-content

Это свойство выравнивает всю сетку целиком внутри её контейнера по горизонтальной (inline) оси. Оно вступает в силу только тогда, когда общий размер всех колонок сетки (явно заданных через grid-template-columns) меньше, чем ширина самого grid-контейнера. Таким образом, justify-content работает с избыточным пространством по ширине.

.grid_container {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, auto);
    justify-content: stretch;
}

justify-items

Свойство justify-items - устанавливает выравнивание по умолчанию для всех grid-элементов по горизонтали внутри их индивидуальных, отведённых им ячеек. Оно задаёт глобальное поведение для контейнера, определяя, как каждый его дочерний элемент будет позиционирован в своей ячейке по оси X.

.grid_container {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, auto);
    justify-items: stretch;
}

align-content

Это свойство является аналогом justify-content, но выравнивает всю сетку целиком внутри её контейнера по вертикальной (block) оси. Оно активируется, когда общая высота всех строк сетки (явно заданных через grid-template-rows) меньше, чем высота самого grid-контейнера. align-content управляет избыточным пространством по высоте.

.grid_container {
    height: 350px;
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, auto);
    align-content: stretch;
}

align-items

Это свойство устанавливает выравнивание по умолчанию для всех grid-элементов по вертикали внутри их индивидуальных ячеек. Оно является парным к justify-items и управляет выравниванием по оси Y для всех элементов контейнера.

.grid_container {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(2, 150px);
    align-items: stretch;
}

grid

Свойство grid - это "король" свойств-сокращений в Grid. Оно позволяет в одной лаконичной декларации задать подавляющее большинство параметров контейнера. Из-за своей мощи оно имеет несколько форм синтаксиса, что может быть сложным для новичков, но невероятно эффективно для опытных разработчиков.

.grid_container {
    display: grid;
    gap: 30px;
    grid: 100px auto / repeat(3, 1fr);
}

order

Это свойство определяет порядок отображения элемента внутри grid-контейнера в контексте автоматического размещения. Все элементы по умолчанию имеют order: 0. Элементы располагаются в порядке возрастания значения order; элементы с одинаковым значением order располагаются в порядке их следования в исходном HTML-коде.

Влияние: order влияет только на визуальный порядок при автоматическом размещении. Для элементов, позиционированных явно (с помощью grid-column/grid-row), это свойство не изменит их позицию в сетке, но может повлиять на порядок наложения (z-index), если элементы занимают одни и те же ячейки.

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

.grid_container {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, 1fr);
}
.grid_element:nth-child(1) { order: 1; }
.grid_element:nth-child(2) { order: 2; }
.grid_element:nth-child(3) { order: 3; }
.grid_element:nth-child(4) { order: 4; }
.grid_element:nth-child(5) { order: 5; }

align-self

Свойство align-self - это свойство является парным к justify-self и позволяет переопределить выравнивание по умолчанию, установленное в align-items, для одного конкретного элемента. Оно управляет выравниванием элемента по вертикали внутри его собственной ячейки.

Когда использовать: Если у вас в контейнере все элементы растянуты на всю высоту ячейки (align-items: stretch;), но для одного элемента вы хотите отключить растягивание и центрировать его по вертикали, вы примените к нему align-self.

.flex_container {
    display: flex;
    gap: 30px;
    grid-template-columns: repeat(4, 1fr);
}
.grid_element:nth-child(3) {
    align-self: stretch;
}

justify-self

Свойство justify-self - позволяет переопределить выравнивание по умолчанию, установленное для контейнера в justify-items, но только для одного конкретного элемента. Оно управляет выравниванием элемента по горизонтали внутри его собственной ячейки.

Когда использовать: Представьте, что все элементы в контейнере выровнены по умолчанию по левому краю (justify-items: start;), но одну конкретную кнопку вы хотите визуально выделить, выровняв её по правому краю её ячейки. Для этого вы примените к ней justify-self: end;.

.flex_container {
    display: flex;
    gap: 30px;
    grid-template-columns: repeat(4, 1fr);
}
.grid_element:nth-child(3) {
    justify-self: stretch;
}

grid-area

grid-area - это многофункциональное свойство, которое является самым мощным инструментом позиционирования для grid-элемента. Оно может использоваться в двух ключевых ролях.

Роль 1: Универсальное сокращение для позиционирования

Синтаксис: grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

Пример: grid-area: 2 / 1 / 4 / 3; — элемент будет расположен между 2-й и 4-й строками и между 1-й и 3-й колонками.

Роль 2: Привязка к именованной области.

Если вы определили именованные области в контейнере с помощью grid-template-areas, это свойство помещает элемент в указанную область.

Синтаксис: grid-area: <area-name>;

Пример: grid-area: sidebar; — элемент займёт всю область с именем "sidebar".

.grid_container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 100px 250px 100px;
    grid-template-areas: 'sidebar header'
                        'sidebar content'
                        'sidebar footer';
}
.sidebar, .header, .content, .footer {
    margin: 15px;
}
.sidebar {
    grid-area: sidebar;
}
.header {
    grid-area: header;
}
.content {
    grid-area: content;
}
.footer {
    grid-area: footer;
}

grid-column-start

Свойство grid-column-start - определяет местоположение grid-элемента в сетке ссылаясь на конкретные колонки. Это свойство задаёт начальную вертикальную линию сетки, с которой начинается элемент. Оно "зацепляет" элемент за конкретную линию, определяя, в какой колонке он начнёт своё размещение.

Способы указания линии:

По номеру: grid-column-start: 2; — элемент начнётся со 2-й вертикальной линии (фактически, разместится во 2-й колонке, если считать линии слева направо, начиная с 1).

По имени: Если вы именовали линии в grid-template-columns, можно использовать имя: grid-column-start: sidebar-start;.

Ключевое слово span: grid-column-start: span 2; — элемент начнётся с текущей позиции в потоке и будет "растягиваться" вперёд, охватывая 2 колонки. Сама стартовая позиция при этом вычисляется автоматически.

Отрицательная нумерация: grid-column-start: -2; — элемент начнётся со 2-й линии с конца сетки.

.grid_element {
    grid-column-start: 1;
}

grid-column-end

Свойство grid-column-end - определяет местоположение grid-элемента в сетке ссылаясь на конкретные колонки. Это свойство задаёт конечную вертикальную линию сетки, на которой заканчивается элемент. Оно определяет правую границу элемента.

Способы указания линии:

По номеру: grid-column-end: 4; — элемент закончится на 4-й вертикальной линии.

Ключевое слово span: grid-column-end: span 3; — элемент закончится через 3 колонки от своей начальной позиции, заданной в grid-column-start.

Важность комбинации: Сочетание grid-column-start: 2; и grid-column-end: 4; разместит элемент между 2-й и 4-й линиями, то есть он займёт 2-ю и 3-ю колонки.

.grid_element {
    grid-column-end: 2;
}

grid-column

grid-column - универсальное свойство, которое позволяет одновременно задать значения двух свойств: grid-row-start и grid-row-end. Оно делает код чище и легче для чтения.

.grid_container {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(5, 1fr);
}
.grid_element:nth-child(2) { 
    grid-column: 2 / 2;
}

grid-row-start

Свойство grid-row-start - определяет местоположение grid-элемента в сетке ссылаясь на конкретные линии. Это свойство задаёт начальную горизонтальную линию сетки, с которой начинается элемент. Оно определяет, в какой строке элемент начнёт своё размещение.

Принцип работы: Аналогичен grid-column-start, но работает с горизонтальными линиями (строками). Пример: grid-row-start: 3; — элемент начнёт размещение с 3-й горизонтальной линии.

.grid_element {
    grid-row-start: 1;
}

grid-row-end

Определяет местоположение grid-элемента в сетке ссылаясь на конкретные линии. grid-row-end - определяет номер строки на которой grid-элемент заканчивается

Свойство grid-row-end - определяет местоположение grid-элемента в сетке ссылаясь на конкретные линии. Это свойство задаёт конечную горизонтальную линию сетки, на которой заканчивается элемент. Оно определяет нижнюю границу элемента.

Принцип работы: Аналогичен grid-column-end, но для строк. Пример: Комбинация grid-row-start: 1; grid-row-end: 3; разместит элемент между 1-й и 3-й горизонтальными линиями, то есть он займёт 1-ю и 2-ю строки.

.grid_element {
    grid-row-end: 2;
}

grid-row

Универсальное свойство, которое позволяет одновременно задать значения двух свойств grid-row-start и grid-row-end. Работает по тому же принципу, что и grid-column, но для управления строками.

.grid_container {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(4, 1fr);
}
.grid_element:nth-child(1) { 
    grid-row: 1 / 2;
}