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

Зачем

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

Объявление контейнера

<div class="gr-cq">
  <article class="gr-p-3 gr-p-5-cmd">…</article>
</div>

Суффикс -c<брейкпоинт>

Шкала — та же карта $gr-breakpoints, что и у оконных запросов. Отдельной шкалы для контейнеров нет намеренно: она удвоила бы источник правды.

Какие классы получили контейнерные варианты

Попробуйте: потяните за правый нижний угол

<div class="gr-cq">
  <article data-gr-layout="a1-b1" data-gr-layout-csm="a1b2">
    <div class="gr-area-a">…</div>
    <div class="gr-area-b">
      <h3 class="gr-text-base gr-text-lg-csm">…</h3>
    </div>
  </article>
</div>

Одна разметка, два контейнера

Ширина окна у обеих карточек ниже одна и та же. Различает их только ширина колонки, в которой они стоят.

Виджеты по гнезду

Виджет магазина — подборка товаров, промо, таймер — монтируют в любую позицию раскладки: в боковую колонку, в содержимое, в карточку товара. Его вид должен зависеть от ширины гнезда, а не окна, и его CSS должен уметь обратиться к гнезду по имени через голову ближайшего безымянного .gr-cq. Имя классом, а не инлайновым style="--gr-name: aside": инлайновый стиль в теме обычно запрещён. Четыре имени — соглашение, чтобы тема и модули договаривались об одних словах:

<aside class="gr-cq-aside">
  <section class="promo">…</section>
</aside>

/* CSS виджета: порог по гнезду, а не по окну */
@container aside (width < 40rem) { .promo { … } }

Пороги — те же, что у суффиксов: -csm / -cmd / -clg / -cxl = 640 / 768 / 1024 / 1280 px ширины гнезда. Так виджет собирается из готовых классов без своего CSS: сетка .gr-grid-1 .gr-grid-3-cmd, флекс .gr-flex-col .gr-flex-row-csm, таблица .gr-table-stack-cmd, лента .gr-track-stack-csm .gr-track-3-cmd — столбик в узкой колонке, три в ряд в широкой. Своё имя по-прежнему через --gr-name; вариант data-gr-cq="…" не сделан — attr() внутри container-name не поддерживается ни одним движком.

Раскладки: data-gr-layout-c<брейкпоинт>

Оконная и контейнерная цепочки на одном элементе независимы — и не мешают друг другу. Базовая раскладка при этом закрывается обеими сразу:

<div data-gr-layout="a1" data-gr-layout-md="a1b1" data-gr-layout-cmd="a2b1">

@media (width < 768px) {
  @container (width < 768px) { .gr-l-хеш { /* a1 */ } }
}
@media (width >= 768px)     { .gr-l-хеш { /* a1b1 */ } }
@container (width >= 768px) { .gr-l-хеш { /* a2b1 */ } }

Оставь база открытой по одной из осей — она накрыла бы диапазон другой, и какая раскладка победит, решал бы порядок правил в таблице, а не ширина. Когда оба диапазона совпали, побеждает контейнерный: его правило стоит в таблице позже.

Вложенные контейнеры

Запрос без имени разрешается к ближайшему предку-контейнеру. Вложили .gr-cq внутрь .gr-cq — всё внутри считается от внутреннего, а внешний становится недосягаем. Это самая частая ошибка с контейнерными запросами, и она не даёт ни ошибки в консоли, ни пустого стиля: просто отвечает не тот элемент.

<section class="gr-cq">              <!-- внешний: 1200px -->
  <div class="gr-cq">                <!-- внутренний: 300px -->
    <p class="gr-text-lg-csm">…</p>  <!-- считает 300px, а не 1200px -->
  </div>
</section>

Чтобы обратиться к внешнему через голову внутреннего, дайте ему имя. Имя приезжает свойством --gr-name, а не классом: имя контейнера — это CSS-идентификатор, придуманный на стороне страницы, и статический файл не может знать его список. Свойство общее, а не --gr-cq-name: container-name, anchor-name и view-transition-name берут один и тот же идентификатор, и элемент вправе называться один раз на все роли.

<section class="gr-cq" style="--gr-name: page">
  <div class="gr-cq">
    <p class="wide-only">…</p>
  </div>
</section>

/* своё правило страницы */
@container page (width >= 60rem) {
  .wide-only { display: block; }
}

Из SCSS

Обёртка запроса — миксин gr-container-media:

@use 'griffincss-core/scss/container-queries' as cq;

@include cq.gr-container-media(md) {
  .my-card { padding: 2rem; }
}

// именованный контейнер
@include cq.gr-container-media(lg, page) {
  .my-card { padding: 3rem; }
}

Компилтайм-раскладки принимают контейнерные варианты теми же параметрами $csm … $cxl. Вывод побайтово совпадает с тем, что генерирует рантайм, — это проверяется в packages/core/test/generate.test.js:

@use 'griffincss-core/scss/grid-parser' as p;

@include p.gr-grid-layout('a1', $md: 'a1b1', $cmd: 'a2b1', $name: 'hero');

Поддержка

Контейнерные запросы — базовая возможность целевых браузеров с 2023 года (Chrome 105+, Safari 16+, Firefox 110+). Развилки @supports библиотека не делает: она и так требует :has() и popover, которые новее, и удвоение вывода ради среды, которая не поддерживается в остальном, ничего бы не купило.

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

Контейнерные варианты пишутся один раз — а дальше виджет носит свою адаптивность с собой, в какую бы клетку шаблона его ни поставили. Два рецепта ниже — карточка, меняющая раскладку и словоохотливость по месту, и KPI-плитка, меняющая плотность.

Карточка товара для любой клетки

Одна разметка на все места шаблона: в узкой клетке карточка вертикальна и немногословна, в широкой — раскладывается картинкой влево (data-gr-layout-csm), укрупняет заголовок (.gr-text-lg-csm) и показывает описание, которого в узкой версии нет вовсе: .gr-hidden .gr-block-csm — скрытие тоже меряется контейнером. Обёртка-клетка получает .gr-cq, сама карточка — нет: элемент не может измерять себя.

<div class="gr-cq"><!-- клетка шаблона любой ширины -->
  <article class="gr-card gr-p-4" data-gr-layout="a1-b1" data-gr-layout-csm="a1b2">
    <img class="gr-area-a gr-w-full gr-aspect-video gr-object-cover gr-radius-1" src="…" alt="">
    <div class="gr-area-b">
      <h3 class="gr-text-base gr-text-lg-csm">Кресло «Дюна»</h3>
      <p class="gr-hidden gr-block-csm gr-text-sm gr-text-ink-secondary">
        Описание видно только в широкой клетке.
      </p>
      <p class="gr-font-bold">12 400 ₽</p>
    </div>
  </article>
</div>

KPI-плитка: плотность по ширине места

Виджет статистики живёт и в тесном сайдбаре, и в широкой клетке дашборда. Контейнерные варианты спейсинга и типографики подстраивают плотность: в узком месте — .gr-p-3 и обычный кегль числа, от 640px контейнера — просторный .gr-p-6-csm, крупное число .gr-text-4xl-csm и центрирование .gr-text-center-csm. Медиазапросами такое не решается: ширина окна одна, а клетки — разные.

<div class="gr-cq">
  <div class="gr-card gr-p-3 gr-p-6-csm gr-text-center-csm">
    <p class="gr-text-xs gr-uppercase gr-text-ink-secondary">Выручка</p>
    <p class="gr-text-2xl gr-text-4xl-csm gr-font-extrabold">1,2 млн ₽</p>
  </div>
</div>