259
container query
also @container
Style the component from the size of its parent, not the size of the window.
What is container query?
A container query applies CSS when a named container crosses a width or a height. A card in a sidebar and the same card in a main column can differ. A media query cannot see that, because it only sees the viewport. The container has to be declared. Size containers do not work on every display value.
Why does container query matter when vibe coding?
The draft writes a media query for a component. It looks right on a full-width phone and wrong in a desktop sidebar, or the other way around. The breakpoint was about the window.
How do you do container query?
Name the container on the parent that actually changes. Query that. Keep media queries for the page chrome. Do not duplicate a component per breakpoint.
How do you ask a model for container query?
Use a container query for (component), not a viewport media query. Set container-type on (parent). Change the layout at (width). Do not fork the component per page.
What goes wrong with container query?
Putting container-type on the element you are also querying, or on a flex item that then collapses to zero.