CSS Container Queries
Container queries let component styles depend on a containing context rather than only on the viewport. Size queries solve the classic reusable-component problem, while newer query types extend the model to style, scrolling and anchor-positioning state.
Names and nested contexts
container-name allows a query to target a particular containment context rather than simply the nearest eligible ancestor.
This matters in nested components where a card may be inside both a content region and an internal widget shell. Named containers make the dependency explicit. Name-only queries can also target the presence of a container name without a size test, allowing contextual styling when a component is intentionally placed in a named region.
CSS Container Queries in images
Selected visual references help connect the article to surviving works, objects, places, documents or practical examples related to this subject.
Why viewport media queries are not enough
A card can appear in a full-width main column, a narrow sidebar or a dashboard cell while the viewport remains exactly the same size. A viewport media query cannot know how much room that individual card has. Container size queries move the decision closer to the component. An ancestor is established as a size query container, commonly with container-type:inline-size, and descendants can switch layout when that container crosses a specified width.
Size queries and units
The @container rule can test dimensions such as width, height, aspect ratio or orientation when the appropriate containment has been established. Container query length units such as cqw and cqh are relative to query-container dimensions. These tools support components that scale and recompose according to where they are placed. They do not eliminate media queries, because viewport-wide navigation, print behavior and user preferences still belong to broader environmental conditions.
Style and scroll-state queries
Current MDN documentation describes five broad container-query categories: size, style, name-only, scroll-state and anchored queries. Style queries can respond to custom-property values, allowing descendants to adapt to a contextual token such as a theme. Scroll-state queries can test conditions including whether content is scrollable, which direction was recently scrolled, whether a snap target is snapped or whether a sticky element is stuck. Support for individual subfeatures still deserves compatibility checking before critical use.
Anchored container queries
Anchored queries connect container-query logic with CSS anchor positioning fallbacks. An anchor-positioned tooltip may normally sit above its trigger but flip below when the upper placement would overflow. By making the positioned element an anchored query container, descendant styling can respond to the fallback actually used, for example by moving an arrow. This is a specialized capability, but it demonstrates how container queries are evolving from simple width breakpoints into a broader mechanism for component context.
More context, examples and technical detail
This section moves beyond the introductory account into the material, historical and interpretive details that make CSS Container Queries worth studying in depth.
Components can respond to their container, not only the viewport
CSS container queries allow styles to depend on the size or style of an ancestor container. This solves a common component problem: a card may appear in a wide main column, a narrow sidebar or a grid cell, and viewport media queries cannot know how much space the card itself actually has. By establishing a query container, the component can reorganize based on its local context.
Size queries are especially powerful for reusable design systems because behavior travels with the component.
Containment changes how layout is calculated
Container queries rely on containment concepts that let the browser determine which dimensions can safely be queried without circular dependency. Modern syntax usually uses container-type: inline-size for width-based component queries. Units such as cqw and cqh express percentages of a query container. These tools complement rather than replace media queries: viewport-level decisions and component-level decisions solve different problems.
Components that respond to their own space
CSS container queries address a limitation of viewport media queries: a reusable component may need to adapt to the width of its parent rather than the whole browser window. By establishing a query container and using @container rules, styles can respond to available inline or block size. This is especially useful in component systems where the same card, navigation module or panel appears in a wide main column and a narrow sidebar. Container query units such as cqw and cqh extend the model. The feature encourages more locally responsive design, where components know about their immediate layout context without requiring page-specific class combinations or JavaScript measurements.
A card can appear in a full-width main column, a narrow sidebar or a dashboard cell while the viewport remains exactly the same size.
The @container rule can test dimensions such as width, height, aspect ratio or orientation when the appropriate containment has been established.
Current MDN documentation describes five broad container-query categories: size, style, name-only, scroll-state and anchored queries.
Anchored queries connect container-query logic with CSS anchor positioning fallbacks.
CSS container queries allow styles to depend on the size or style of an ancestor container.
Container queries rely on containment concepts that let the browser determine which dimensions can safely be queried without circular dependency.
Related topics in the Wemaxa Encyclopedia
