I\u2019ll admit, when container queries first shipped back in 2022, I didn\u2019t really pay attention. I mean, why container size queries<\/a> when we already have media queries<\/a>? Why container style queries<\/a> when custom properties inherit anyway (they don\u2019t work with standard properties\u2026 yet<\/em>)? Their use cases seemed like edge cases to me, enabling us to do things that we could already do but in a different way.<\/p>\n\n\n\n\n\n\n\n

Here’s a container size queries demo by Kevin Powell<\/a>. As a note, all major browsers support size queries in the following demo, but other demos in this article may require the latest Chrome.<\/p>\n\n\n\n