Как использовать контейнерные запросы

Короткий ответ

Объявите родителя контейнером и пишите условия через @container. Карточка ниже стоит в узкой и в широкой колонке:

<style>
  .slot { container-type: inline-size; margin-bottom: 8px; border: 1px dashed silver; }
  .card { display: grid; gap: 8px; padding: 8px; }
  .card img { width: 100%; }
  @container (min-width: 300px) { .card { grid-template-columns: 100px 1fr; } }
</style>
 
<div class="slot" style="width: 200px;"><div class="card"><img src="/media/photo-200x200.jpg" alt=""><p>Narrow slot</p></div></div>
<div class="slot" style="width: 400px;"><div class="card"><img src="/media/photo-200x200.jpg" alt=""><p>Wide slot</p></div></div>

Одинаковый код дал две разные раскладки — в зависимости от места, а не от экрана.

Зачем это нужно

Медиазапрос знает только ширину окна. Но одна и та же карточка может стоять в широкой ленте и в узкой боковой колонке. Контейнерный запрос позволяет компоненту подстраиваться под отведённое ему место, где бы его ни вставили.

Единицы контейнера

Внутри контейнера работают единицы cqi — процент его ширины. Например, font-size: clamp(1rem, 5cqi, 1.5rem) растёт вместе с колонкой.

Частая ошибка

Условие @container не может менять сам контейнер — только его потомков. Если написать стили для .slot внутри @container, ничего не случится. Поэтому нужен отдельный элемент-обёртка, как в примере.