The limitation of viewport queries
For over a decade, responsive design was synonymous with viewport media queries (@media (min-width: ...)). While media queries work well for page layouts, they fail when designing modular, reusable components. A card placed inside a narrow sidebar needs to look different than the same card placed inside a wide main column—even at the exact same screen size.
Before container queries, developers had to create contextual CSS modifiers like .sidebar .card or pass layout props in JavaScript, breaking component encapsulation.
Components that own their responsiveness
With container queries, a component observes its parent element rather than the entire browser window. By adding `container-type: inline-size` to the parent container, child elements can use `@container (min-width: 400px)` to adapt dynamically.
This means you can drop a card into a 3-column grid, a 1-column mobile feed, or a modal window, and it will effortlessly adapt its layout, font size, and spacing based entirely on the room it has available.
Container query units
Beyond `@container` rules, container query units like `cqi` (container query inline size) unlock fluid typography and spacing that scale relative to the component itself rather than the screen. It is one of the most significant upgrades to CSS in recent memory.