Container Queries in Practice: Responsive Components Without Media Queries

Container queries let components adapt to their own space instead of the viewport. Learn how to build truly reusable responsive UI with modern CSS, including fallbacks and real-world patterns.

For years, responsive design meant one thing: write media queries against the viewport width. This works for page-level layouts, but it breaks down the moment you drop a component into a sidebar, a modal, or a grid cell that doesn't know its own width. The component can't respond to the space it actually occupies — it only knows the browser window size.

What Container Queries Change

CSS Container Queries (Level 1) shift the responsive target from the viewport to the nearest ancestor with container-type set. A card in a 300px sidebar gets one layout; the same card in a 800px main column gets another — without a single @media rule.[1]

The mental model is straightforward: declare a container, then query its inline-size (width) or block-size (height). The browser handles the rest.

The .card-component now rearranges itself based on the space its parent provides. No viewport math required.

Browser Support and the Fallback Reality

As of September 2026, container queries are supported in all major engines: Chrome 105+, Firefox 110+, Safari 16+, and Edge 105+.[2] That covers roughly 94% of global users. For the remaining 6%, a progressive enhancement strategy keeps layouts functional.

The @supports wrapper ensures older browsers ignore the container rules entirely and render the baseline grid. Users on unsupported browsers get a perfectly usable stacked layout; modern browsers get the adaptive version.

Real-World Pattern: The Adaptive Card Grid

A common pattern: a grid of cards that should show 1, 2, or 3 columns depending on available width. With media queries, you'd need to know the exact breakpoint of every parent context. With container queries, the grid itself becomes the container.

Drop this .card-grid into a 400px aside — it renders one column. Drop it into a 1200px main — it renders three. The same component, zero configuration.

Container Query Units: cqw, cqh, cqi, cqb

Beyond @container rules, the spec introduces container-relative length units. 1cqw = 1% of the container's inline size; 1cqh = 1% of block size; cqi/cqb map to logical inline/block axes.[3] These replace the old pattern of calculating percentages in JavaScript or abusing CSS custom properties.

The title scales smoothly between 1rem and 1.5rem based on the card's own width — not the viewport. This is true component-scoped fluid typography.

Naming Containers for Scoped Queries

When nested containers exist, container-name lets you target a specific ancestor. This prevents a deeply nested component from accidentally matching a grandparent's query.

Always name your containers when the component tree has multiple responsive contexts. It's the difference between predictable scoping and subtle layout bugs.

Performance Notes

Container queries add a layout dependency: the browser must resolve container sizes before evaluating @container rules. In practice, this is negligible for typical component counts. Avoid extremely deep nesting (10+ levels) of named containers on performance-critical pages, and prefer inline-size over size (which queries both axes) unless you need block-size awareness.[4]

Migration Checklist

If you're moving an existing codebase:

• Audit @media breakpoints that target component-level layouts (not page-level).
• Wrap each component root with container-type: inline-size and a semantic container-name.
• Replace component-scoped @media rules with @container equivalents.
• Wrap new rules in @supports (container-type: inline-size) for graceful degradation.
• Test in a narrow sidebar, a wide main column, and a modal — all without changing the component.

Sources

[1] CSS Containment Module Level 3 — Container Queries, W3C Working Draft. [2] Can I Use: CSS Container Queries, retrieved September 2026. [3] CSS Values and Units Module Level 4 — Container Query Units. [4] MDN: CSS Container Queries — Performance considerations.