CSS container queries: адаптивность по ширине блока

@container меняет стили по размеру родительского контейнера, а не по ширине окна. Это позволяет одному компоненту выглядеть по-разному в сайдбаре и в широкой колонке без привязки к viewport. Контейнер объявляют через container-type, а условие пишут в @container.

Перестроить карточку по ширине контейнера

.card-list {
    container-type: inline-size;
}

.card {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@container (min-width: 480px) {
    .card {
        grid-template-columns: 160px 1fr;
        align-items: center;
    }
}

container-type: inline-size создаёт контейнер по горизонтальной оси и включает containment, поэтому ширина контейнера не зависит от содержимого. Запрос @container (min-width: 480px) применяется к потомкам контейнера, но не к самому .card-list. Если контейнеров несколько, задайте имя: container-name: card; и проверяйте @container card (min-width: 480px).

Внутри запроса доступны единицы контейнера: cqw, cqh, cqi, cqb, cqmin, cqmax. Например, font-size: clamp(1rem, 4cqi, 2rem) масштабирует заголовок по ширине карточки. Не путайте cqi с vw: первая зависит от контейнера, вторая — от окна.

Поддержка есть в Chrome 105+, Safari 16+ и Firefox 110+. В старых браузерах @container игнорируется, поэтому базовые стили должны быть самодостаточными: колонка из одного элемента или flex-wrap. Медиазапросы остаются полезны для глобальной сетки страницы, а container queries — для повторно используемых компонентов.

Не создавайте цикл: контейнер с container-type: size требует явной высоты и может зависеть от содержимого. Для большинства карточек достаточно inline-size. Проверяйте, что внутри контейнера нет position: fixed-элементов, для которых containment меняет containing block.

Документация: MDN container queries, Can I use.