Контейнерные запросы
Класс query-container делает элемент контейнером запросов: префиксы
cq-sm: … cq-xl: на вложенных элементах срабатывают по его ширине, а не
по ширине окна. Берите его для карточек, виджетов и панелей, которые стоят то
в широкой колонке, то в узкой.
Пример
Узкий и широкий контейнер
Одна и та же разметка grid grid-col-1 cq-sm:grid-col-2 в двух контейнерах.
В узком (max-w-g4) карточки идут столбиком, в широком — двумя колонками.
На узком экране оба контейнера узкие.
Именованный контейнер
Внешний блок — широкий query-container/sidebar, внутри — узкий
query-container. Префикс cq-sm: смотрит на ближайший контейнер, то есть на
узкий, и строка остаётся столбиком. Префикс cq-sm/sidebar: смотрит на
контейнер с именем sidebar и выстраивает элементы в строку.
Классы
| Класс | CSS | Значения |
|---|---|---|
query-container |
container-type: inline-size |
— |
query-container/sidebar |
container-type: inline-size; container-name: sidebar |
— |
Условия (что это): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Контейнер и префиксы
Поставьте query-container на обёртку, а классы с префиксом cq-* — на
вложенные элементы. Какие классы принимают префикс и с какой ширины
срабатывает каждый, описано на странице
Адаптация по размеру контейнера.
<section class="query-container">
<div class="grid grid-col-1 cq-sm:grid-col-2 gap-2">
<article>…</article>
<article>…</article>
</div>
</section>
Именованный контейнер
query-container/sidebar даёт контейнеру имя sidebar. Префикс
cq-sm/sidebar: и его варианты для md, lg, xl ищут ближайший
контейнер с этим именем и пропускают безымянные контейнеры между ними.
Префикс без имени, cq-sm:, смотрит на ближайший контейнер любого вида,
в том числе на sidebar.
<aside class="query-container/sidebar">
<div class="query-container">
<div class="flex flex-col cq-sm/sidebar:flex-row gap-2">…</div>
</div>
</aside>
Контейнер или ширина экрана
Префиксы sm: … xxl: срабатывают по ширине окна, cq-* — по ширине
контейнера. Для раскладки всей страницы берите префиксы ширины экрана, для
блока, который встраивают в разные колонки, — контейнерные запросы.
Ограничения
- Контейнер не может зависеть от ширины своего содержимого:
query-containerзадаётcontainer-type: inline-size. Строчный блок, плавающий или абсолютно позиционированный элемент без заданной ширины схлопывается. Задайте контейнеру ширину или ставьте класс на блок, который растягивается по родителю. - Элемент не отвечает на запрос по своей ширине: класс с префиксом
cq-*на самом контейнере срабатывает по ширине внешнего контейнера. - Имя у контейнера одно —
sidebar. Других имён в выпуске нет. - У классов нет префиксов ширины экрана и состояния.