Container Query Units у 2026: адаптивні компоненти без хаосу медіазапитів

Класичний responsive-підхід будувався навколо viewport-breakpoint. У сучасних продуктах цього недостатньо: один і той самий компонент живе в різних контейнерах і ширинах. Container query units вирішують це, бо компонент адаптується до власного простору, а не до всього екрана.

Чому viewport-only підхід більше не працює

• той самий компонент у різних ширинах на одній сторінці
• вбудовані CMS-віджети
• dashboard-картки зі змінною сіткою

Що дають container query units

Компонент питає не яка ширина екрана, а яка ширина мого контейнера.

Переваги:

• локальна responsive-логіка
• висока переносимість компонентів
• менше конфліктів глобальних breakpoint
• чистіший контракт дизайн-системи

Практичний шаблон імплементації

.card-grid {
  container-type: inline-size;
}
@container (min-width: 36rem) {
  .card {
    grid-template-columns: 1.2fr 1fr;
    gap: 1.25rem;
  }
}

План міграції

• знайдіть компоненти з найбільшою кількістю override
• мігруйте сімействами
• залишайте viewport-медіазапити на рівні shell
• документуйте нові правила

Підсумок

Container query units — це не тренд, а логічний крок у бік компонентної архітектури.