Контейнерные запросы в CSS на одном простом примере

Долгое время адаптивная вёрстка строилась на медиавыражениях: браузер смотрит на ширину окна и применяет нужные стили. Это работало, но создавало одну постоянную проблему.

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

Container queries решают именно эту задачу: элемент адаптируется под размер своего контейнера, а не под размер окна.

Попробуйте сами

Перетащите разделитель — карточка перестраивается в зависимости от доступного места:

Карточка одна и та же. Меняется только ширина её контейнера.

Как это работает

Сначала нужно объявить контейнер — элемент, за шириной которого мы будем следить:

.sidebar {
  container-type: inline-size;
}

inline-size означает, что нас интересует ширина контейнера. Теперь дочерние элементы могут на неё реагировать:

/* карточка по умолчанию — вертикальная */
.card {
  display: flex;
  flex-direction: column;
}

/* если контейнер шире 400px — горизонтальная */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

Синтаксис похож на медиавыражения, только вместо @media пишем @container — и браузер смотрит на ширину ближайшего объявленного контейнера, а не на окно.

Именованные контейнеры

Если контейнеров на странице несколько, можно дать им имена, чтобы правила не путались:

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

.main-content {
  container-type: inline-size;
  container-name: main;
}

Теперь в запросе указываем конкретное имя:

@container sidebar (min-width: 300px) {
  .widget { font-size: 14px; }
}

@container main (min-width: 600px) {
  .widget { font-size: 18px; }
}

Один и тот же .widget в разных частях страницы будет вести себя по-разному — в зависимости от того, в каком контейнере находится.

Container units

Вместе с container queries появились новые единицы: cqw — один процент ширины контейнера. Они работают как vw, но отсчитываются от контейнера, а не от окна:

@container (min-width: 400px) {
  .card__title {
    font-size: 5cqw;
  }
}

Поддержка в браузерах

Container queries работают в Chrome 105+, Safari 16+, Firefox 110+. В 2025 году это практически полное покрытие. Актуальные данные — на caniuse.com.

Что запомнить

Container queries меняют подход к адаптивной вёрстке: теперь компоненты могут быть по-настоящему независимыми. Карточка, виджет или блок сами знают, как выглядеть в зависимости от доступного места, — и им не нужно знать, где именно на странице они стоят.

Если только начинаете разбираться с адаптивной вёрсткой — почитайте про единицы измерения в CSS и про то, когда лучше использовать флексы, а когда гриды.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.