Справочник HTML & CSS

@container

Применяет правила в зависимости от размера контейнера, а не окна.

Синтаксис

@container (min-width: 400px) { … }

Параметры

Параметр	Тип	Описание
container-type	inline-size	Задаётся родителю: `inline-size` делает его контейнером по ширине.
container-name	name	Имя, чтобы обратиться к конкретному контейнеру: `@container sidebar (…)`.
(min-width: …)	condition	Условие на размер контейнера.
cqi	unit	Единица: 1% ширины контейнера.

Примеры

Карточка, которая меняет раскладку вместе с шириной своего блока:

<style>
  .wrap { container-type: inline-size; resize: horizontal; overflow: auto; border: 1px dashed gray; width: 260px; }
  .card { display: grid; gap: 8px; padding: 8px; }
  .card img { width: 100%; }
 
  @container (min-width: 350px) {
    .card { grid-template-columns: 120px 1fr; }
  }
</style>
 
<div class="wrap">
  <div class="card">
    <img src="/media/photo-400x250.jpg" alt="">
    <p>Drag the corner to widen the box — the card switches to two columns.</p>
  </div>
</div>

Примечания

Контейнерные запросы делают компоненты независимыми от места: одна и та же карточка работает и в узкой боковой колонке, и в широкой области содержимого. Сам контейнер правилом оформить нельзя — только его потомков. Поддерживается всеми актуальными браузерами с 2023 года.

См. также

@media — Применяет правила только при заданных условиях — ширине окна, теме системы и других.
px, em, rem, %, vw, vh — Единицы длины в CSS: абсолютные пиксели и относительные единицы.
grid-template-columns — Количество и ширина колонок сетки.

Вопросы и ответы по теме

В учебнике

Контейнерные запросы — Как компонент подстраивается под ширину своего блока, а не окна — container-type, правило @container, имена контейнеров и единицы cqi.

Спасибо, что читаете!