Container Queries: практичний гід по макетах

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

Чому це важливо

Картка в сайдбарі і така ж картка в основному контенті не повинні мати однакові breakpoints.

Component-first адаптивність

З container queries кожен компонент керує власними правилами макета. Це підвищує переносимість і зменшує складність глобальних медіа-запитів.

Де це дає максимум

• Сітки карток
• Віджети дашбордів
• Вкладені макети
• Компоненти дизайн-системи

Стратегія міграції

Користь для команди

Container queries знижують зв'язаність CSS між сторінками. Команди швидше релізять оновлення компонентів і ловлять менше регресій.