Grid-утилиты

Статические CSS-классы для быстрого создания grid-раскладок без JS-рантайма. Контейнеры, адаптивные сетки, ряды равной высоты, span-утилиты и выравнивание. Data-атрибутов здесь нет — они остались только у парсера раскладок.

Контейнер

Класс	CSS	Назначение
`.gr-container`	`max-width: var(--gr-max-width); margin-inline: auto; padding-inline: var(--gr-gap)`	Центрированный контейнер с максимальной шириной
`.gr-container-full`	`width: 100%; max-width: none`	Контейнер на всю ширину
`.gr-expand-root`	`container-type: inline-size`	Корень расширения — см. ниже
`.gr-container-expand`	`width` и `margin-inline` от `100cqw` — формула ниже	Блок во всю ширину корня, из любой вложенности
`.gr-grid`	`display: grid; gap: var(--gr-gap)`	Базовый grid-контейнер
`.gr-grid-place-center`	`display: grid; place-items: center`	Центрирование содержимого по обеим осям

Gap-модификаторы

Один набор классов на все контейнеры — grid, flex и раскладки data-gr-layout:

Класс	Значение gap	До md (768px)	С md
`.gr-gap-sm`	`var(--gr-gap-sm)`	0.375rem	0.5rem
`.gr-gap`	`var(--gr-gap)`	0.75rem	1rem
`.gr-gap-lg`	`var(--gr-gap-lg)`	1.25rem	2rem

Отдельных вариантов с суффиксом брейкпоинта нет: значение меняют сами токены, поэтому один и тот же класс даёт меньший отступ на мобильном и привычный — на десктопе.

<div class="gr-grid gr-gap-sm">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
</div>

<div class="gr-flex gr-gap-lg">…</div>
<div data-gr-layout="a3b4-c2d5" class="gr-gap">…</div>

Блок во всю ширину

.gr-container-expand растягивает блок на всю ширину предка, помеченного .gr-expand-root, — сколько бы ограниченных по ширине контейнеров ни лежало между ними. Типичный случай: врезка на всю ширину посреди текста в .gr-container.

.gr-expand-root {
  container-type: inline-size;
}

.gr-container-expand {
  width: calc(100cqw + 2 * var(--gr-expand-inset, 0px));
  margin-inline: calc(50% - 50cqw - var(--gr-expand-inset, 0px));
}

Ширина берётся из 100cqw — процента от корня-контейнера, а не от окна. В отличие от 100vw, полоса прокрутки в неё не входит, поэтому горизонтального переполнения не возникает.

<body class="gr-expand-root">
  <div class="gr-container">
    <p>Обычный текст, ограниченный шириной контейнера.</p>
    <div class="gr-container-expand">Во всю ширину окна</div>
  </div>
</body>

Корнем может быть любой предок, а не только body. На этой странице корень — колонка с текстом, поэтому врезка равняется по неё и не наезжает на боковую панель. В демо ниже корнем сделана сама карточка.

Корень — эта карточка

Родитель ограничен 420px.

.gr-container-expand — во всю ширину карточки

Текст снова внутри 420px.

Паддинги корня

По умолчанию блок занимает внутреннюю ширину корня, то есть останавливается на его паддингах. Чтобы перекрыть и их, сообщите величину через --gr-expand-inset — CSS не умеет читать отступы предка, поэтому значение нужно назвать. Сам паддинг переменная не задаёт.

.content {
  padding-inline: 3rem;
  container-type: inline-size;  /* или класс .gr-expand-root */
  --gr-expand-inset: 3rem;      /* повторяет паддинг */
}

Переменная наследуется. Как и любое CSS-свойство, --gr-expand-inset достаётся всем потомкам — включая вложенный .gr-expand-root. Если внутри корня с отступом 3rem появляется второй корень с другим паддингом, задайте ему собственное значение (или 0px), иначе блок вылезет за его границы ровно на разницу. Именно так сделано в демо выше: карточка объявляет свои --gr-expand-inset: 1.5rem вместо унаследованных от колонки.

Два ограничения. Ширина корня не должна зависеть от его содержимого: container-type включает инлайн-containment, и inline-block схлопнется в ноль. И предки между корнем и блоком должны быть центрированы — формула складывает 50% родителя с 50cqw корня. .gr-container с margin-inline: auto этому удовлетворяет.

Адаптивная сетка (auto-fit / auto-fill)

Создаёт адаптивную сетку без медиа-запросов — колонки автоматически переносятся при сужении экрана. Идеально для карточек, галерей и списков.

Класс	Поведение
`.gr-grid-sm` … `.gr-grid-xl`	`display: grid` и базовый отступ — от указанного брейкпоинта. Безусловный `.gr-grid` живёт в Grid-парсере
`.gr-grid-auto-fit`	`repeat(auto-fit, minmax(var(--gr-grid-min, 250px), 1fr))` — растягивает колонки, если их меньше чем места
`.gr-grid-auto-fill`	`repeat(auto-fill, minmax(var(--gr-grid-min, 250px), 1fr))` — создаёт пустые колонки при избытке места
`--gr-grid-min`	минимальная ширина дорожки, по умолчанию `250px`. Наследуется — задаётся на блоке или на любом предке

Минимальная ширина дорожки задаётся переменной --gr-grid-min: <div class="gr-grid-auto-fit" style="--gr-grid-min: 180px">. Переменная наследуется, поэтому её можно задать один раз на секции каталога, а не на каждом блоке.

<div class="gr-grid-auto-fit">
  <div>Карточка 1</div>
  <div>Карточка 2</div>
  <div>Карточка 3</div>
  <div>Карточка 4</div>
  <div>Карточка 5</div>
</div>

Результат: gr-grid-auto-fit

Карточка 1

Адаптируется под ширину

Карточка 2

При сужении — перенос

Карточка 3

Чистый CSS Grid

Карточка 4

Минимум кода

Карточка 5

auto-fit + minmax

Явные сетки (1–12 колонок)

Фиксированное число колонок. Класс самодостаточен — включает display: grid и отступ, поэтому .gr-grid рядом не нужен. Колонка описана как minmax(0, 1fr), а не 1fr: доля не бывает уже своего содержимого, и одно длинное слово или широкая таблица раздували бы её, вынося сетку за контейнер.

Класс	Колонки	Применение
`.gr-grid-1` … `.gr-grid-12`	1–12	Всегда
`.gr-grid-1-sm` … `.gr-grid-12-sm`	1–12	От 640px
`.gr-grid-1-md` … `.gr-grid-12-md`	1–12	От 768px
`.gr-grid-1-lg` … `.gr-grid-12-lg`	1–12	От 1024px
`.gr-grid-1-xl` … `.gr-grid-12-xl`	1–12	От 1280px

<div class="gr-grid-2 gr-grid-3-md gr-grid-4-lg">
  <div>На мобильных: 2 в ряд</div>
  <div>Планшет: 3 в ряд</div>
  <div>Десктоп: 4 в ряд</div>
  <div>Адаптивно!</div>
</div>

Результат: 2 → 3 → 4 колонки

Колонка 1

Мобильные: 2 в ряд

Колонка 2

Планшет: 3 в ряд

Колонка 3

Десктоп: 4 в ряд

Колонка 4

Адаптивно!

По ширине контейнера

Те же классы с буквой c в суффиксе считают колонки от ширины ближайшего предка с .gr-cq, а не окна: .gr-grid-3-cmd против .gr-grid-3-md. Шкала — та же карта брейкпоинтов (контейнерные запросы). Это раскладка для блока, который монтируют в любое гнездо страницы — в боковую колонку или в содержимое: в узком гнезде одна колонка, в широком три, и число колонок не зависит от того, где блок оказался.

Класс	Колонки	Применение
`.gr-grid-1-csm` … `.gr-grid-12-csm`	1–12	От 640px ширины контейнера
`.gr-grid-1-cmd` … `.gr-grid-12-cmd`	1–12	От 768px ширины контейнера
`.gr-grid-1-clg` … `.gr-grid-12-clg`	1–12	От 1024px ширины контейнера
`.gr-grid-1-cxl` … `.gr-grid-12-cxl`	1–12	От 1280px ширины контейнера

<aside class="gr-cq">
  <div class="gr-grid-1 gr-grid-2-csm gr-grid-3-cmd">
    <div>В колонке уже 640px — одна</div>
    <div>От 640px гнезда — две</div>
    <div>От 768px гнезда — три</div>
  </div>
</aside>

Ширина окна одна — гнёзда разные: сверху 15rem, снизу вся ширина колонки

1

Гнездо 15rem — одна колонка

2

3

1

Гнездо шире 640px — две, шире 768px — три

2

3

Пары .gr-grid-c* к .gr-grid нет: без числа колонок класс менял бы один display, а показ и скрытие по гнезду уже делают .gr-hidden-c* / .gr-block-c* из утилит. Раскладка областей по ширине контейнера — data-gr-layout-c* на странице контейнерных запросов.

Ряды равной высоты

По умолчанию высота ряда определяется его собственным содержимым, поэтому соседние ряды получаются разными. .gr-grid-rows выравнивает их все — по самому высокому содержимому. Число рядов указывать не нужно: правило действует на каждый ряд, сколько бы их ни получилось.

Класс	CSS	Назначение
`.gr-grid-rows`	`grid-auto-rows: 1fr`	Все ряды равной высоты

Высоту контейнера задавать не требуется: без неё ряды выравниваются по самому высокому содержимому, с ней — делят её поровну. На раскладки data-gr-layout класс не влияет — там число рядов задано явно.

<div class="gr-grid-3 gr-grid-rows">
  <div>Короткий</div>
  <div>Текст подлиннее, в две строки</div>
  <div>Короткий</div>
  <div>Короткий</div>
  <div>Короткий</div>
  <div>Короткий</div>
</div>

Без класса: ряды разной высоты

2 — содержимое подлиннее, чтобы ряд стал выше остальных

С .gr-grid-rows: ряды равной высоты

2 — содержимое подлиннее, чтобы ряд стал выше остальных

Column span и Row span

Утилиты для дочерних элементов grid-контейнера. Позволяют растягивать элемент на несколько колонок или рядов.

Класс	Диапазон	CSS
`.gr-grid-col-span-N`	1–12	`grid-column: span N`
`.gr-grid-row-span-N`	1–6	`grid-row: span N`

<div class="gr-grid-4">
  <div class="gr-grid-col-span-2">На 2 колонки</div>
  <div>Обычная</div>
  <div>Обычная</div>
  <div class="gr-grid-col-span-4">На всю ширину</div>
</div>

Результат: span-утилиты

span 2

span 4 (вся ширина)

Subgrid — дорожки родителя

Обычная вложенная сетка считает свои дорожки сама, и одинаковые по смыслу части соседних блоков расходятся: заголовок в одной карточке занял две строки, в соседней одну — подписи под ними уже не на одной линии. subgrid снимает вопрос: вложенный элемент не заводит своих дорожек, а берёт те дорожки родителя, которые попали в его область.

Класс	CSS	Назначение
`.gr-subgrid`	`display: grid` `grid-template-columns: subgrid`	Колонки родителя проходят внутрь элемента
`.gr-subgrid-rows`	`display: grid` `grid-template-rows: subgrid`	То же самое по рядам

Элемент обязан занимать больше одной дорожки. Subgrid перенимает те дорожки, которые попали в его собственную область: область в одну колонку и даёт одну колонку, и класс визуально ничего не меняет. Ставьте рядом .gr-grid-col-span-N или задайте grid-column: 1 / -1 своим CSS. Родитель при этом должен быть grid-контейнером, а элемент — его прямым потомком: через промежуточный <div> дорожки не проходят.

Отступ элемент наследует от родителя вместе с дорожками. Нужен свой — ставится обычный .gr-gap-*.

<div class="gr-grid-3">
  <article class="gr-subgrid-rows gr-grid-row-span-3">
    <h3>Заголовок</h3>
    <p>Текст произвольной длины</p>
    <footer>Подвал</footer>
  </article>
  <article class="gr-subgrid-rows gr-grid-row-span-3">…</article>
  <article class="gr-subgrid-rows gr-grid-row-span-3">…</article>
</div>

Три карточки: заголовки, тексты и подвалы стоят на общих линиях

Короткий

Один абзац.

Заголовок подлиннее, в две строки

Текст этой карточки заметно длиннее соседних, и в обычной вложенной сетке он растянул бы только её.

Средний

Два предложения. Второе короткое.

Примеры использования

Утилиты этой страницы — строительный набор для «обычных» сеток: каталога, футера, витрины фич. Рецепты ниже показывают, как контейнер, auto-fit, спаны и gap-токены складываются в готовые блоки — и когда вместо них пора переходить на строку раскладки Grid-парсера.

Каталог без медиазапросов

Витрина товаров, которая сама решает, сколько карточек влезает в ряд: .gr-grid-auto-fit с минимумом дорожки --gr-grid-min: 180px. Переменная наследуется — она задана один раз на секции, а не на каждой сетке. Пара .gr-grid-rows выравнивает ряды, чтобы короткая карточка не рвала кладку, а зазор — токен .gr-gap, единый с остальной страницей.

<section style="--gr-grid-min: 180px">
  <div class="gr-grid-auto-fit gr-grid-rows">
    <article class="gr-card gr-p-4">Товар</article>
    <article class="gr-card gr-p-4">Товар</article>
    …
  </div>
</section>

Число колонок выбирает сетка: сузьте окно

Кресло «Дюна»

12 400 ₽

Торшер «Свет» с длинным названием в две строки

5 900 ₽

Стол «Дуб»

21 000 ₽

Полка «Норд»

3 200 ₽

Футер: бренд и колонки ссылок

Верх футера — сетка .gr-grid-2 .gr-grid-5-md, где колонка бренда шире остальных за счёт .gr-grid-col-span-2, а три колонки ссылок — обычные ячейки со стопками .gr-flex-col .gr-gap-sm. Нижняя строка «© и соцсети» — флекс .gr-flex-between с .gr-flex-wrap и разделителем .gr-border-t.

<footer class="gr-py-8">
  <div class="gr-grid-2 gr-grid-5-md gr-gap-lg">
    <div class="gr-grid-col-span-2">
      <p class="gr-font-bold">Griffin</p>
      <p class="gr-text-sm gr-text-ink-secondary">Модульная CSS-библиотека.</p>
    </div>
    <nav class="gr-flex gr-flex-col gr-gap-sm">…Продукт…</nav>
    <nav class="gr-flex gr-flex-col gr-gap-sm">…Компания…</nav>
    <nav class="gr-flex gr-flex-col gr-gap-sm">…Помощь…</nav>
  </div>
  <div class="gr-flex gr-flex-wrap gr-flex-between gr-gap gr-border-t gr-mt-8 gr-pt-4">
    <span class="gr-text-sm gr-text-ink-secondary">© 2026 Griffin</span>
    <span class="gr-text-sm">Телеграм · GitVerse</span>
  </div>
</footer>

Бренд шире ссылок на .gr-grid-col-span-2

Griffin

Модульная CSS-библиотека: подключаете только нужное.

Витрина фич с крупной картой

Bento-облегчённо: в сетке .gr-grid-2 .gr-grid-3-md главная фича забирает две колонки и два ряда — .gr-grid-col-span-2 .gr-grid-row-span-2, остальные заполняют клетки вокруг. На мобильном спан по колонкам упирается в ширину сетки и складывается сам. Когда клеток и исключений становится много, честнее перейти на строку раскладки data-gr-layout — она делает то же самое декларативно.

<div class="gr-grid-2 gr-grid-3-md gr-gap">
  <article class="gr-grid-col-span-2 gr-grid-row-span-2 gr-card gr-p-6">Главная фича</article>
  <article class="gr-card gr-p-4">Фича</article>
  <article class="gr-card gr-p-4">Фича</article>
  <article class="gr-card gr-p-4">Фича</article>
</div>

Главная клетка — span-2 по обеим осям

Грид-парсер

Раскладка страницы одной строкой в атрибуте — главная фича занимает клетку 2×2.

Темы

Контейнерные запросы

Произвольные значения

Логические свойства