Все типовые свойства CSS grid, сгруппированные по месту применения: контейнер, элемент и единицы размера. Каждая строка сочетает свойство с его типовыми значениями.
Grid раскладывает элементы в двух измерениях: строки и столбцы одновременно. Задайте родителю display: grid, определите дорожки через grid-template-columns и grid-template-rows и разместите дочерние элементы в ячейках. Используйте grid для макетов страниц и карточек; используйте flexbox для одномерных полос. Они свободно сочетаются.
Справочная таблица · 33 записи
CSS GridExplained
33 of 33 rows
Контейнер
grid | inline-grid
Превращает элемент в grid-контейнер.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Определяет столбцы и их ширину.
auto 1fr auto
Определяет строки и их высоту.
[main-start] 1fr [main-end]
Даёт линиям сетки имена в шаблоне и размещает элементы по этим именам.
1rem | 8px 16px
Промежуток между строками и столбцами.
"header header" "nav main"
Даёт ячейкам имена для удобочитаемого размещения.
"head head" 64px "nav main" 1fr / 200px 1fr
Задаёт строки, столбцы и области одним сокращением.
repeat(2, 1fr) / auto-flow 80px
Задаёт все свойства дорожек и grid-auto-flow в одном объявлении.
minmax(80px, auto)
Задаёт высоту строк, которые шаблон не определяет.
120px | minmax(0, 1fr)
Задаёт ширину столбцов, которые шаблон не определяет.
row | column | row dense
Выбирает ось для неразмещённых элементов; dense заполняет более ранние пробелы.
start | center | end | stretch
Выравнивает каждый элемент в его ячейке вдоль оси строк.
start | center | end | stretch
Выравнивает каждый элемент в его ячейке вдоль оси столбцов.
center | start end
Задаёт align-items и justify-items в одном объявлении.
start | center | space-between
Выравнивает сетку дорожек внутри контейнера вдоль оси строк.
start | center | space-between
Выравнивает сетку дорожек внутри контейнера вдоль оси столбцов.
center | end start
Задаёт align-content и justify-content в одном объявлении.
Элемент
1 / 3 | span 2
Размещает элемент по столбцам или растягивает его на несколько.
1 / 2 | span 3
Размещает элемент по строкам или растягивает его на несколько.
grid-column: 2 / -1
Отсчитывает линии от конца сетки; -1 — последняя линия.
header | 1 / 1 / 2 / 3
Даёт элементу имя или полностью размещает его одним сокращением.
start | center | end | stretch
Выравнивает только этот элемент в его ячейке вдоль оси строк.
start | center | end | stretch
Выравнивает только этот элемент в его ячейке вдоль оси столбцов.
center | start end
Задаёт align-self и justify-self в одном объявлении.
Единицы размера
1fr | 2fr
Доля свободного места в дорожке.
auto | 1fr auto
Размеряет дорожку по содержимому; выравнивание может её растянуть.
min-content | max-content
Размеряет дорожку по самому маленькому или самому большому содержимому.
fit-content(180px)
Размеряет дорожку по содержимому, но не сверх заданного предела.
minmax(200px, 1fr)
Ограничивает дорожку между минимумом и максимумом.
repeat(4, 1fr)
Повторяет шаблон дорожек, не выписывая каждую отдельно.
repeat(auto-fit, minmax(120px, 1fr))
Добавляет столько дорожек, сколько помещается; auto-fit схлопывает пустые.
grid-template-columns: subgrid
Заставляет вложенную сетку использовать дорожки и имена линий родителя.
grid-template-rows: masonry
Экспериментальное: упаковывает элементы в столбцы по высоте вместо фиксированных строк.