Container Queries
Components that adapt to their container.
Media queries respond to the viewport. Container queries respond to whatever element you nominate as a container β so a card knows whether it's in a sidebar or a hero.
Pick a container, then query it
Set container-type: inline-size on the parent. Children can then ask @container (min-width: 400px) and respond to the parent's actual rendered width.
Named containers
Use container-name: card to disambiguate when you have nested containers. Then @container card (...) queries that specific one.
Container query units
cqw, cqh, cqi, cqb size things relative to the nearest container β like vw/vh but scoped.
More to try
Container queries shine once a single component handles several widths. The next example shows three distinct layouts from one container-type, and the last sizes everything off cqw so a widget scales proportionally to its container instead of the page.
Try it 4 examples
Resize the box to see the card adapt
HTML+CSS+JSintroAt the starting 320px the .card renders stacked (art above text) because the @container rule is keyed to the parent's width, which is below 380px. Drag the box's resize handle past 380px and the art and body snap into a two-column 140px 1fr row β the same component reflows off its container's size, not the viewport's.