CSS Grid
Утилиты для построения двумерных лэйаутов с CSS Grid. Все классы поддерживают адаптивные префиксы.
Включить grid-контекст
Используйте d-grid или d-inline-grid из утилит Display, чтобы активировать grid.
html
<div class="d-grid grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>grid-template-columns
Определяет количество равных колонок на дробных единицах.
| Класс | CSS |
|---|---|
grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)) |
grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)) |
grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)) |
grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)) |
grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)) |
grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)) |
grid-cols-none | grid-template-columns: none |
Генерируются классы от 1 до 12.
grid-template-rows
| Класс | CSS |
|---|---|
grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)) |
grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr)) |
grid-rows-3 | grid-template-rows: repeat(3, minmax(0, 1fr)) |
grid-rows-6 | grid-template-rows: repeat(6, minmax(0, 1fr)) |
grid-rows-none | grid-template-rows: none |
Генерируются классы от 1 до 6.
Растяжение по колонкам (col-span)
Управляет тем, сколько колонок занимает элемент.
| Класс | CSS |
|---|---|
col-span-1 | grid-column: span 1 / span 1 |
col-span-2 | grid-column: span 2 / span 2 |
col-span-6 | grid-column: span 6 / span 6 |
col-span-12 | grid-column: span 12 / span 12 |
col-span-full | grid-column: 1 / -1 |
html
<div class="d-grid grid-cols-12 gap-4">
<div class="col-span-8">Основной контент</div>
<div class="col-span-4">Боковая панель</div>
</div>Растяжение по строкам (row-span)
| Класс | CSS |
|---|---|
row-span-1 | grid-row: span 1 / span 1 |
row-span-2 | grid-row: span 2 / span 2 |
row-span-full | grid-row: 1 / -1 |
Генерируются классы от 1 до 6.
Позиция по колонкам (col-start / col-end)
Явное размещение элемента по линиям сетки.
| Класс | CSS |
|---|---|
col-start-1 … col-start-13 | grid-column-start: N |
col-end-1 … col-end-13 | grid-column-end: N |
col-start-auto | grid-column-start: auto |
col-end-auto | grid-column-end: auto |
Позиция по строкам (row-start / row-end)
| Класс | CSS |
|---|---|
row-start-1 … row-start-7 | grid-row-start: N |
row-end-1 … row-end-7 | grid-row-end: N |
row-start-auto | grid-row-start: auto |
row-end-auto | grid-row-end: auto |
grid-auto-flow
Управляет направлением авто-размещения элементов.
| Класс | CSS |
|---|---|
grid-flow-row | grid-auto-flow: row |
grid-flow-col | grid-auto-flow: column |
grid-flow-dense | grid-auto-flow: dense |
grid-flow-row-dense | grid-auto-flow: row dense |
grid-flow-col-dense | grid-auto-flow: column dense |
grid-auto-columns / grid-auto-rows
Размер неявно создаваемых треков.
| Класс | CSS |
|---|---|
auto-cols-auto | grid-auto-columns: auto |
auto-cols-min | grid-auto-columns: min-content |
auto-cols-max | grid-auto-columns: max-content |
auto-cols-fr | grid-auto-columns: minmax(0, 1fr) |
auto-rows-auto | grid-auto-rows: auto |
auto-rows-min | grid-auto-rows: min-content |
auto-rows-max | grid-auto-rows: max-content |
auto-rows-fr | grid-auto-rows: minmax(0, 1fr) |
place-items
Шорткат для align-items + justify-items.
| Класс | Значение |
|---|---|
place-items-start | start |
place-items-end | end |
place-items-center | center |
place-items-stretch | stretch |
place-items-baseline | baseline |
place-content
Шорткат для align-content + justify-content.
| Класс | Значение |
|---|---|
place-content-start | start |
place-content-end | end |
place-content-center | center |
place-content-stretch | stretch |
place-content-between | space-between |
place-content-around | space-around |
place-content-evenly | space-evenly |
place-self
Шорткат для align-self + justify-self отдельного элемента.
| Класс | Значение |
|---|---|
place-self-auto | auto |
place-self-start | start |
place-self-end | end |
place-self-center | center |
place-self-stretch | stretch |
Адаптивные варианты
Все grid-утилиты поддерживают адаптивные префиксы (mobile-first):
html
<!-- 1 колонка на мобильных → 2 с sm → 3 с md → 4 с lg -->
<div class="d-grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>Адаптивный col-span:
html
<div class="d-grid grid-cols-12 gap-4">
<!-- полная ширина на мобильных, 8/12 с md -->
<div class="col-span-12 md:col-span-8">Основной</div>
<div class="col-span-12 md:col-span-4">Боковой</div>
</div>Примеры
Dashboard — 12-колоночная сетка:
html
<div class="d-grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-3">Навигация</div>
<div class="col-span-12 md:col-span-6">Контент</div>
<div class="col-span-12 md:col-span-3">Виджеты</div>
</div>Карточки — адаптивная сетка:
html
<div class="d-grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="col-span-1 sm:col-span-2 lg:col-span-1">Главная карточка</div>
<div>Карточка</div>
<div>Карточка</div>
</div>Центрирование элемента:
html
<div class="d-grid grid-cols-3 grid-rows-3 place-items-center" style="height: 300px">
<div class="col-start-2 row-start-2">По центру</div>
</div>Для произвольных значений вроде
grid-template-columns: repeat(5, 120px)используйте JIT-классы@vueland/utils-jit:grid-cols-[repeat(5,120px)].