CSSworkingbaseline-2023
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.
Resize the box to see the card adapt
HTML+CSS+JSintro Press Run to execute
At 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.