Нетфликс поделился своей саксес стори использования css containers query. В классической медиаквери мы указываем ширину/высоту вьюпорта, в контейнерной квери это размер дива).

Я удивлен что там нет ни слова о двух важных моментах которые надо знать:

1. Одна из самых тяжёлых (по нагрузке на ПК) фича css. А если использовать js полифил, это вовсе катастрофа. Если у вас пяток виджетов работает таким образом - все нормально. Если у вас весь UI на этом построен страничка заметно лагает при ресайзе окна. И это одна из причин почему эти квери так долго не желали тащить в браузер - многие опасались того что если это начнет использоваться массово, общий перф вэба сильно пострадает.

2. Когда таких элементов много их поведение становится сложно предсказуемым. Скажем, у вас есть три компонента в ряд у каждого из которых есть компактный режим. Обычно у нас все они переключаются вместе при достижении маленького размера вьюпорта. Но не с контейнерными квери, где они будут переключаться по очереди, часть будет компактная часть нет. Это надо учитывать, нельзя делать дизайн как сейчас "компактный значит мобильный и тач с кнопками побольше", это теперь разные вещи.