Container queries: адаптивность компонента
Как менять карточку по ширине её контейнера, а не всего окна браузера.
Как это работает
Запрос размера контейнера позволяет одному компоненту адаптироваться к месту, в котором он размещён. Карточка в боковой панели может оставаться компактной даже на широком мониторе, а такая же карточка в основной области — переходить в несколько колонок.
У предка объявляют container-type: inline-size, а стили потомков помещают в @container. Размерный запрос оценивает подходящий контейнер-предок, а не сам элемент, который вы собираетесь изменять. Начальные стили должны оставаться рабочими без выполнения запроса.
Пример в интерфейсе
.host { container-type: inline-size; max-width: 600px; }
.card { display: grid; gap: 12px; padding: 20px; background: #eaf4ee; }
@container (min-width: 450px) { .card { grid-template-columns: 1fr 1fr; } }Значения и поведение
| Значение или правило | Результат |
|---|---|
| container-type: inline-size | Включает запросы по размеру в строчном направлении. |
| container-name | Имя для выбора конкретного контейнера. |
| @container (min-width: …) | Условные стили для потомков. |
На что обратить внимание
Не путайте @media и @container. Первый обычно оценивает окно или устройство, второй — подходящий контейнер. Поддержку нужного вида запроса проверяйте отдельно.
Проверьте на практике
Ограничьте ширину .host сначала 300px, затем 600px. Переключение произойдёт по размеру этой области, даже если окно браузера не менялось.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.