Обычные медиазапросы много лет были единственным способом сделать вёрстку адаптивной, и всё это время у них было одно принципиальное ограничение — они реагируют только на размер всего окна браузера, а не на размер конкретного контейнера, в котором находится элемент.
Проблема становится заметной, когда один и тот же компонент, например карточка товара, используется в разных местах страницы с разной доступной шириной — в узкой боковой колонке и в широкой основной сетке. Медиазапрос по ширине окна не может учесть эту разницу, потому что окно у обоих мест одно и то же.
Контейнерные запросы решают именно эту задачу — компонент реагирует на размер своего непосредственного контейнера, а не всей страницы. Одна и та же карточка может показывать содержимое в одну колонку в узком месте и в две колонки в широком, без необходимости писать отдельные варианты компонента под каждый сценарий.
Для использования контейнерных запросов родительский элемент нужно явно объявить контейнером через свойство container-type, а дальше внутри него можно писать условия по ширине почти так же, как в привычном медиазапросе, только относительно этого контейнера, а не окна целиком.
Это особенно ценно для дизайн-систем и переиспользуемых компонентов, которые заранее не знают, в каком именно контексте их разместят — раньше для действительно гибкого поведения приходилось прибегать к JavaScript, теперь многое из этого решается чистым CSS.
Поддержка контейнерных запросов в современных браузерах уже достаточно широкая, чтобы использовать их в реальных проектах, хотя для критичных сценариев по-прежнему стоит сверяться с таблицами поддержки перед тем, как полагаться на них как на единственный способ адаптации компонента.
Подробное объяснение синтаксиса и практические примеры контейнерных запросов есть в статье про контейнерные запросы на MDN.
