Container query layout
A layout pattern where components style themselves based on the size of their container rather than the size of the viewport.
For two decades, responsive web design meant media queries on viewport width. The problem: a card in a sidebar and a card in the main column needed different layouts at the same viewport. Container queries flip the relationship. You declare a parent as a container with `container-type: inline-size`, then write `@container` rules that respond to that parent's width. The same component reflows correctly in any slot you put it into. This is a fundamental shift, often called 'intrinsic responsive design'.
Also called
When to use
- Card components used in different-width slots
- Component libraries shipped to unknown layouts
- Sidebars and main columns with shared components
- Replacing viewport media queries inside reusable components
When not to use
- Top-level page layout (viewport media queries are still right)
- Theme or typography settings that should respond to the page, not the component
- Very simple sites where viewport queries are sufficient
Related
Source
CSS Containment Module Level 3 (W3C). Size container queries shipped in Chrome 105, Safari 16, and Firefox 110 by early 2023. Miriam Suzanne edited the spec. The broader idea has been called 'intrinsic web design' (Jen Simmons) and 'intrinsic responsive design'.