8 мин чтения
2026-02-06
CSS Grid Layout — мощная система компоновки, позволяющая создавать двумерные сетки. В отличие от Flexbox, Grid работает одновременно по двум осям.
Grid-контейнер — элемент с `display: grid`
Grid-элементы — дочерние элементы контейнера
Grid-линии — разделительные линии сетки
Grid-ячейки — пересечение строки и столбца
Grid-области — именованные группы ячеек
| Свойство | Описание |
|---|---|
| grid-template-columns | Определяет столбцы |
| grid-template-rows | Определяет строки |
| grid-template-areas | Именованные области |
| gap | Промежутки между ячейками |
| justify-items | Выравнивание по горизонтали |
| align-items | Выравнивание по вертикали |
Единица `fr` распределяет свободное пространство пропорционально. `1fr 2fr` создаёт два столбца, где второй вдвое шире.
`repeat(3, 1fr)` — три равных столбца
`minmax(200px, 1fr)` — от 200px до доступного пространства
`repeat(auto-fill, minmax(250px, 1fr))` — адаптивная сетка
Визуально конструируйте Grid-макеты и экспортируйте готовый CSS-код.
Смотрите также: Flexbox Playground, CSS Minifier, Color Picker