Container queries let components adapt their styling based on the size of their parent container rather than the viewport — enabling truly reusable responsive components that work in any layout context.
Container queries style elements based on their parent container's size instead of the viewport, making components truly reusable across different layout contexts.
A parent element must declare container-type (inline-size or size) before children can query its dimensions using @container rules.
New units like cqw, cqh, cqi, and cqb are relative to the query container's dimensions, enabling fluid sizing that scales with the component's available space.
Media queries handle page-level layout decisions, while container queries handle component-level responsiveness — both are needed in modern CSS architecture.
Container queries are one of the most significant additions to CSS in recent years. They solve a fundamental limitation of media queries and represent a paradigm shift from responsive pages to responsive components.
Media queries respond to the viewport width. A card component styled to stack vertically below 600px viewport width works fine on narrow screens. But place that same card in a 300px sidebar on a 1440px desktop, and the media query sees the wide viewport — the card stays in its wide layout even though its container is narrow. Media queries cannot solve this because they have no awareness of individual container sizes.
Container queries require two steps:
.sidebar {
container-type: inline-size;
container-name: sidebar; /* optional, for targeting */
}@container sidebar (max-width: 400px) {
.card { flex-direction: column; }
}If no container name is specified, @container queries the nearest ancestor with containment.
Container queries introduce new units relative to the query container:
cqw / cqh — 1% of the container's width/heightcqi / cqb — 1% of the container's inline/block sizecqmin / cqmax — The smaller/larger of cqi and cqbThese units enable fluid typography and spacing that scales with the container, not the viewport.
Beyond size, the specification includes style queries that let you check the computed value of custom properties on a container:
@container style(--theme: dark) {
.card { background: #1a1a1a; }
}Style queries are still gaining browser support but open powerful possibilities for theming and variant systems.
Media queries are still appropriate for page-level layout decisions (overall page structure, navigation patterns, global font sizes). Container queries are for component-level responsiveness — making components truly portable and reusable across different layout contexts.
The mental model shift: media queries make pages responsive; container queries make components responsive.
Size container queries are supported in all modern browsers since February 2023 (Chrome 105, Firefox 110, Safari 16). Style queries have partial support. For older browsers, components fall back to their default (widest) layout.
Fun Fact
Container queries were the most requested CSS feature for over a decade. The main technical blocker was circularity — if a child's size depends on the parent, and the parent's size depends on the child, you get infinite loops. The containment specification solved this by requiring explicit size containment on the parent.