CSS Container Queries на практиці

Проблема медіа-запитів

Класичні @media запити прив'язані до ширини вікна браузера, а не до того місця, де реально знаходиться компонент. Картка товару виглядає по-різному в трьохколонковій сітці й у вузькому сайдбарі, але медіа-запит про це нічого не знає — він бачить лише глобальний вʼюпорт.

Container Queries вирішують цю проблему на рівні самого компонента: стилі змінюються залежно від розміру батьківського контейнера, а не екрана цілком. Детальніше про суміжний підхід можна прочитати в матеріалі «Мікрофронтенди: коли вони справді потрібні».

Як це виглядає в коді

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

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 120px 1fr;
  }
}

Тут батьківський блок оголошується контейнером через container-type, а дочірній компонент реагує на його ширину незалежно від того, в якій частині макета він опинився. Це особливо цінно для дизайн-систем: та сама картка однаково коректно працює і в сайдбарі, і на всю ширину сторінки, без дублювання компонентів під різні контексти. Ці ідеї перегукуються з темами «Розбираємося з View Transitions API» та «GraphQL vs REST у 2026: що обрати».