📋 Grid Cheatsheet
Все свойства CSS Grid в одном месте с визуальными примерами
25 свойств
🔍
Ничего не найдено. Попробуйте другой запрос.
📦 Свойства контейнера
display
container
Определяет тип контейнера. Значение
grid делает элемент блочным grid-контейнером.grid
Блочный grid-контейнер
display: grid;
inline-grid
Строчный grid-контейнер
display: inline-grid;
grid-template-columns
container
Определяет количество и размеры колонок в сетке.
1fr 1fr 1fr
3 равные колонки
1
2
3
grid-template-columns: 1fr 1fr 1fr;
200px 1fr
Фиксированная + гибкая
grid-template-columns: 200px 1fr;
repeat(4, 1fr)
4 равные колонки
1
2
3
4
grid-template-columns: repeat(4, 1fr);
repeat(auto-fit, minmax(100px, 1fr))
Адаптивные колонки
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows
container
Определяет количество и размеры строк в сетке.
1fr 1fr 1fr
3 равные строки
1
2
3
4
5
6
grid-template-rows: 1fr 1fr 1fr;
100px auto 1fr
Фикс + авто + гибкая
grid-template-rows: 100px auto 1fr;
minmax(100px, auto)
Минимум 100px, максимум по содержимому
grid-template-rows: minmax(100px, auto);
gap / row-gap / column-gap
container
Управляет расстоянием между ячейками сетки.
gap: 10px
Одинаковый отступ
1
2
3
gap: 10px;
gap: 1rem 2rem
row-gap column-gap
gap: 1rem 2rem;
row-gap / column-gap
Отдельно для строк и колонок
row-gap: 1rem; column-gap: 2rem;
grid-template-areas
container
Создаёт визуальный макет с помощью именованных областей.
Именованные области
Визуальное описание layout
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
Пустая ячейка
Используйте . для пустой области
grid-template-areas:
"header header"
". content"
"footer footer";
justify-items
container
Выравнивание элементов внутри ячеек по горизонтальной оси.
start
К началу ячейки
1
2
3
justify-items: start;
center
По центру ячейки
1
2
3
justify-items: center;
end
К концу ячейки
1
2
3
justify-items: end;
stretch
Растянуть (по умолчанию)
1
2
3
justify-items: stretch;
align-items
container
Выравнивание элементов внутри ячеек по вертикальной оси.
start
К верху ячейки
align-items: start;
center
По центру ячейки
align-items: center;
end
К низу ячейки
align-items: end;
stretch
Растянуть (по умолчанию)
align-items: stretch;
place-items
container
Сокращение для
align-items и justify-items.place-items: center
Центр по обеим осям
place-items: center;
place-items: start end
align justify
place-items: start end;
justify-content
container
Выравнивание всей сетки по горизонтальной оси (когда сетка меньше контейнера).
start
Сетка к началу (по умолчанию)
justify-content: start;
center
Сетка по центру
justify-content: center;
end
Сетка к концу
justify-content: end;
space-between
Равномерно между колонками
justify-content: space-between;
space-around
Равные отступы вокруг
justify-content: space-around;
space-evenly
Равные отступы между и по краям
justify-content: space-evenly;
align-content
container
Выравнивание всей сетки по вертикальной оси.
start / center / end
Базовые выравнивания
align-content: center;
space-between / around / evenly
Распределение строк
align-content: space-between;
stretch
Растянуть строки
align-content: stretch;
grid-auto-flow
container
Управляет автоматическим размещением элементов, которые не были явно размещены.
row
Заполнять строки (по умолчанию)
grid-auto-flow: row;
column
Заполнять колонки
grid-auto-flow: column;
dense
Плотная упаковка (заполнять пустоты)
grid-auto-flow: dense;
row dense / column dense
Направление + плотная упаковка
grid-auto-flow: row dense;
grid-auto-columns / grid-auto-rows
container
Размер автоматически созданных колонок/строк (когда элементов больше, чем определено в template).
grid-auto-rows: 100px
Все авто-строки по 100px
grid-auto-rows: 100px;
grid-auto-columns: 1fr
Все авто-колонки равные
grid-auto-columns: 1fr;
minmax(100px, auto)
Минимум 100px, максимум по содержимому
grid-auto-rows: minmax(100px, auto);
🎯 Свойства элементов
grid-column
item
Определяет, какие колонки занимает элемент. Сокращение для
grid-column-start и grid-column-end.grid-column: 1 / 3
Занять колонки с 1 по 3
grid-column: 1 / 3;
grid-column: span 2
Растянуть на 2 колонки
grid-column: span 2;
grid-column: 1 / -1
От первой до последней (вся ширина)
grid-column: 1 / -1;
grid-row
item
Определяет, какие строки занимает элемент.
grid-row: 1 / 3
Занять строки с 1 по 3
grid-row: 1 / 3;
grid-row: span 2
Растянуть на 2 строки
grid-row: span 2;
grid-area
item
Сокращение для размещения элемента в именованной области или указания всех 4 линий.
grid-area: header
Разместить в области "header"
grid-area: header;
grid-area: 1 / 1 / 3 / 4
row-start / col-start / row-end / col-end
grid-area: 1 / 1 / 3 / 4;
justify-self
item
Индивидуальное выравнивание элемента по горизонтали внутри ячейки.
start / center / end / stretch
Базовые выравнивания
justify-self: center;
align-self
item
Индивидуальное выравнивание элемента по вертикали внутри ячейки.
start / center / end / stretch
Базовые выравнивания
align-self: center;
place-self
item
Сокращение для
align-self и justify-self.place-self: center
Центр по обеим осям
place-self: center;
place-self: start end
align-self justify-self
place-self: start end;
🔢 Единицы и функции
fr (fraction)
unit
Доля свободного пространства. Основная единица в Grid.
1fr 2fr 1fr
Средняя колонка в 2 раза больше
grid-template-columns: 1fr 2fr 1fr;
200px 1fr
Фикс + остаток
grid-template-columns: 200px 1fr;
repeat()
function
Повторяет паттерн колонок/строк.
repeat(3, 1fr)
3 равные колонки
repeat(3, 1fr);
repeat(2, 100px 1fr)
Повторить паттерн 2 раза
repeat(2, 100px 1fr);
repeat(auto-fit, minmax(100px, 1fr))
Адаптивные колонки
repeat(auto-fit, minmax(100px, 1fr));
repeat(auto-fill, 200px)
Заполнить колонками по 200px
repeat(auto-fill, 200px);
minmax()
function
Определяет минимальный и максимальный размер.
minmax(100px, 1fr)
Минимум 100px, максимум — доля
minmax(100px, 1fr);
minmax(auto, 200px)
Минимум по содержимому, максимум 200px
minmax(auto, 200px);
minmax(min-content, max-content)
По содержимому
minmax(min-content, max-content);
auto-fit vs auto-fill
keyword
Разница между auto-fit и auto-fill при использовании в repeat().
auto-fill
Создаёт столько колонок, сколько помещается, даже если пустые
repeat(auto-fill, 100px);
auto-fit
Сжимает пустые колонки до 0, существующие растягивает
repeat(auto-fit, minmax(100px, 1fr));
Именованные линии
feature
Можно давать имена линиям сетки для более читаемого кода.
[start] 1fr [middle] 1fr [end]
Имена линий в квадратных скобках
grid-template-columns: [start] 1fr [middle] 1fr [end];
grid-column: start / end
Использование имён линий
grid-column: start / end;