🎨Developer

CSS Container Queries Are Ready for Production. Here's How to Use Them.

Container queries let components respond to their container's size, not the viewport. After two years of browser support maturation, here's how to use them today.

6 min readJanuary 26, 2026By FreeToolKit TeamFree to read

The component responsiveness problem has been a thorn in frontend developers' sides since responsive design became standard. Media queries work for page layouts but they're terrible for components that appear in different contexts.

Container queries solve this. And in 2025, they're ready to use without apology.

The Setup: Container Type

You define a containment context on the parent element, then write queries that respond to it:

The container-type: inline-size establishes the query context. Without this, @container rules won't work.

A Real Example: A Card That Adapts

Imagine a product card that should be compact in a sidebar (200px wide) and expanded in the main grid (350px wide), without any JavaScript or extra props.

Drop this card anywhere. In the sidebar it stacks. In the main grid it goes horizontal. No media queries, no JavaScript, no prop drilling.

Using cqi Units for Responsive Type

The heading scales from 1rem minimum to 1.75rem maximum, proportional to the container width. Works everywhere the card appears without any tweaking.

When to Keep Using Media Queries

Container queries don't replace media queries — they complement them. Use media queries for page-level layout decisions: sidebar visible or not, one-column vs three-column grid, navigation collapsed or expanded. Use container queries for component-level adaptation: how a card looks at different widths, how a button group wraps, how typography scales. The mental model: media queries for structure, container queries for components.

Minify your CSS for production →

Frequently Asked Questions

What's the difference between media queries and container queries?+

Media queries respond to the viewport size. Container queries respond to a component's container size. This sounds like a small difference but it's enormous in practice. With media queries, a card component can only look different based on how wide the browser window is. With container queries, the same card can display differently depending on whether it's in a sidebar, a main content area, or a modal — even if all three scenarios use the same browser window width. This makes components genuinely portable and self-contained for the first time.

Do container queries have good browser support now?+

Yes. All major browsers added container query support in 2023: Chrome 105, Firefox 110, Safari 16. As of 2025, global support is above 93% across browser versions in use. You no longer need a polyfill for most production projects. The caveats: very old browsers in some enterprise environments might not support them, and some of the newer container query features (style queries, state queries) have more limited support than the core size-based queries which are solid everywhere.

What is a container query unit?+

Container query units — cqi, cqb, cqw, cqh — are like viewport units (vw, vh) but relative to the container instead of the viewport. cqi is 1% of the container's inline size (usually width). So if your container is 400px wide, 50cqi equals 200px. These are useful for typography that should scale with the container, not the viewport. A card's heading can be 5cqi instead of clamp(1rem, 3vw, 2rem) — the cqi unit handles the scaling automatically and relative to the card's actual size.

Can I use container queries for things other than size?+

Style queries are the exciting next frontier — they let you apply CSS based on custom property values set on the container. For example, a card inside a container that has --theme: dark could automatically apply dark styles without passing the theme as a prop. Browser support for style queries is still partial (Chrome has it, Firefox is working on it), but it's the direction things are heading. The end state is components that completely adapt to their context without any JavaScript intervention.

🔧 Free Tools Used in This Guide

Css Minifier Html Minifier

FreeToolKit Team

We build free browser-based tools and write practical guides that skip the fluff.

Tags:

developercssfrontendresponsive

Continue Reading

⚡

LCP and INP Optimization: What Actually Moves the Score

8 min read

📘

TypeScript Utility Types: The Ones Worth Actually Learning

7 min read