Что такое container queries и чем они отличаются от media queries?

Container query применяет стили в зависимости от размера родительского контейнера, а не окна браузера.

Проблема media queries

Компонент-карточка может встречаться в узкой боковой панели и на широкой странице. Media query смотрит на окно и не знает, сколько места у конкретного блока.

Решение

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

.card { display: grid; gap: 8px; }

@container card (min-width: 420px) {
  .card {
    grid-template-columns: 160px 1fr; /* картинка слева, текст справа */
  }
}

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

cqw, cqh, cqi — доли размера контейнера, похожи на vw и vh.

Когда что

• Media query — общая раскладка страницы: шапка, колонки.
• Container query — самостоятельные компоненты, которые должны выглядеть правильно в любом месте.

Коротко для собеседования

Container queries делают компонент независимым от окна: он подстраивается под размер своего контейнера.