Мини-справочник
| Свойство / понятие | Назначение | Пример значения |
|---|---|---|
display: grid | Делает элемент grid-контейнером — включает двумерную сетку для его прямых детей. | display: grid; |
grid-template-columns | Задаёт число и ширины колонок (треков по горизонтали). | 1fr 1fr 1fr · 200px 1fr |
grid-template-rows | Задаёт число и высоты строк (треков по вертикали). | 80px auto |
fr | Единица «доля» — делит оставшееся свободное место поровну между треками. | 1fr · 2fr 1fr |
repeat() | Сокращение для повторяющихся треков: repeat(N, размер). | repeat(3, 1fr) |
gap | Зазор между ячейками (можно отдельно row-gap/column-gap). | 16px · 16px 24px |
Как проверять: включите Grid overlay в DevTools (значок «grid» рядом
с
display: grid в панели Styles) — браузер подсветит линии, треки и gap прямо на странице.