Build context-aware components with container-type, @container, cqi/cqw units, and style container queries
0 / 5 completed
1 / 5
What problem do CSS container queries solve that media queries do not?
Container queries: media queries respond to the viewport, but a reusable component may sit in a wide main area or a narrow sidebar. Container queries let the component query its container's size and adapt accordingly, making truly context-independent, reusable components possible regardless of overall page width.
2 / 5
How do you make an element a query container?
Establishing a container:container-type: inline-size (or the shorthand container: sidebar / inline-size to also name it) makes an element a containment context. Children can then use @container (min-width: 400px) { ... }. inline-size queries width while allowing height to size naturally, the most common choice.
3 / 5
What does the @container at-rule do?
@container: works like @media but evaluates against the nearest matching container ancestor. @container sidebar (min-width: 400px) { .card { grid-template-columns: 1fr 1fr } } applies only when the named container is at least 400px wide, letting the same .card render single or multi-column depending on context.
4 / 5
What are container query units like cqw and cqi?
Container query units:cqw/cqh are 1% of the container's width/height, and cqi/cqb are 1% of its inline/block size. For example font-size: 5cqi scales text with the container rather than the viewport (as vw would), so a component is internally fluid relative to its own space.
5 / 5
What are style container queries?
Style queries: extend container queries beyond size to query a container's style state, most usefully custom properties: @container style(--variant: compact) { ... }. This lets a parent set a custom property that descendants react to via CSS alone. Browser support for style queries is more limited than for size queries, so progressive enhancement is advised.