Усі типові властивості 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
Експериментальне: пакує елементи в стовпці за висотою замість фіксованих рядків.