⚡ Кратко
grid, grid-cols-*, gap-*,
col-span-*, row-span-*, произвольные шаблоны
grid-cols-[…].
Контейнер
| Класс | CSS | Комментарий |
|---|
grid | display: grid | включает сетку |
inline-grid | display: inline-grid | сетка в строке текста |
grid-cols-1 … grid-cols-12 | grid-template-columns: repeat(N, minmax(0, 1fr)) | равные колонки |
grid-cols-none | без явных колонок | только автоматические |
grid-cols-[200px_1fr] | произвольный шаблон | пробел заменяется _ |
grid-rows-* | grid-template-rows | явные строки |
auto-rows-min, auto-rows-fr | grid-auto-rows | размер автоматических строк |
grid-flow-row, grid-flow-col, grid-flow-dense | grid-auto-flow | порядок заполнения |
gap-*, gap-x-*, gap-y-* | gap | промежутки |
Элементы сетки
| Класс | Что делает |
|---|
col-span-2 | занять две колонки |
col-span-full | занять всю ширину сетки |
col-start-2, col-end-4 | явное положение по колонкам |
row-span-2 | занять две строки |
row-start-1, row-end-3 | явное положение по строкам |
order-* | порядок отображения |
Выравнивание
| Класс | Ось | Комментарий |
|---|
items-start / items-center / items-end | вертикаль | содержимое ячеек |
justify-items-start / justify-items-center | горизонталь | содержимое ячеек |
place-items-center | обе | короткая запись |
content-center, content-between | вертикаль | вся сетка внутри контейнера |
self-end, justify-self-center | — | для одного элемента |
Частые шаблоны
| Задача | Классы |
|---|
| Адаптивная сетка карточек | grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 |
| Сетка «сама подберёт колонки» | grid gap-4 grid-cols-[repeat(auto-fit,minmax(220px,1fr))] |
| Сайдбар и контент | grid grid-cols-[240px_1fr] |
| Заголовок во всю ширину | col-span-full |
| Центрировать один элемент | grid place-items-center |
| Карточки одинаковой высоты | auto-rows-fr |