Container queries let components adapt to the size (and in some engines, style) of their container, not the viewport. Declare a container with container-type (or the container shorthand), write @container rules, and—boom—cards that reflow correctly whether they’re in a grid, a sidebar, or a toaster. Sprinkle in container query units like cqw/cqh for fluid sizing. Size queries are well-supported in modern browsers; style queries exist but have limited support—check compat tables before you ship.
As an Amazon Associate I earn from qualifying purchases.
Why container queries (still) matter in 2025
Media queries answer, “How big is the viewport?”
Container queries answer, “How big is the box I’m in?”
If your card looks great in the main column but collapses into sadness inside a sidebar, container queries are your new best friend. MDN positions them as an alternative to media queries, targeting container size (and, where supported, style/scroll state). MDN Web Docs
The 60-second crash course
/* 1) Opt-in: make a box a query container */
.card-grid { container-type: inline-size; } /* size container */
.sidebar { container: sidebar / inline-size; } /* shorthand: name + type */
/* 2) Query the nearest eligible container */
@container (min-width: 40rem) {
.card { grid-template-columns: 160px 1fr; }
}
/* 3) Target a named container specifically */
@container sidebar (max-width: 28rem) {
.nav { display: none; } /* hide big nav when sidebar is skinny */
}
container-type(orcontainer) establishes the containment context a child can query.@containerapplies styles based on the container’s conditions (width/height/inline/block, etc.). MDN Web Docs+1- You can also assign names via
container-nameand target them in@container. MDN Web Docs
Patterns you can ship today
1) Cards that fit anywhere (grid, list, sidebar)
.cards { container-type: inline-size; }
@container (min-width: 36rem) {
.card { display: grid; grid-template-columns: 180px 1fr; gap: 1rem; }
}
@container (max-width: 35.999rem) {
.card { display: block; }
}
No more “it breaks when marketing puts the card in a 300px rail.”
2) Component-driven typography
.article { container-type: inline-size; }
@container (min-width: 60rem) {
.article h2 { font-size: 1.5rem; }
}
@container (max-width: 40rem) {
.article h2 { font-size: 1.125rem; }
}
Headings scale with the column, not the window.
3) “Smart” promo banners
.promo { container-type: inline-size; }
@container (min-width: 48rem) {
.promo { display: grid; grid-template-columns: 2fr 1fr; }
}
@container (max-width: 47.999rem) {
.promo { display: block; }
}
4) Named containers for surgical tweaks
/* Layout defines a named container */
.sidebar { container: sidebar / inline-size; }
@container sidebar (max-width: 26rem) {
.sidebar .filters { display: none; } /* hide filter panel when sidebar is tiny */
}
Named containers keep your rules from “accidentally” matching the wrong ancestor. MDN Web Docs
5) Container query units = effortless fluid sizing
.hero { container-type: inline-size; }
.hero h1 { font-size: clamp(1.25rem, 6cqw, 3rem); } /* 1cqw = 1% of container width */
cqw, cqh, cqi, cqb, cqmin, cqmax make elements flow with the container’s dimensions; they’re well-documented and broadly supported in evergreen browsers. MDN Web Docscaniuse.com
Style queries? Scroll state? Quick reality check
- Size queries (what you’re using above) ✅ widely supported across modern browsers. MDN Web Docs
- Style queries exist in the spec and some engines, but support is limited—Chrome/Edge have had implementations, while other browsers have lagged. Always check MDN’s compat notes. MDN Web Docs+1
- State/scroll queries were deferred from the Level 3 spec—so don’t plan your quarter around them. drafts.csswg.org
Common gotchas (learned the spicy way)
- You must opt-in a container. If nothing matches, your
@containerrules politely do nothing. (Ask me how I know.) MDN Web Docs - Use the right type.
inline-sizeis a great default;size(both axes) only when you truly need height queries. MDN Web Docs - Don’t over-containerize. Wrap logical regions (cards, sidebars, articles), not every
<div>. Your future self will thank you. - Prefer component-local breakpoints. Let the card decide when to flip, not the page.
- Units beat magic numbers. If you’re hardcoding
font-size: 37px, trycqw(orcqmin) instead. MDN Web Docs
Performance & specificity tips
- Anchor queries on classed containers (e.g.,
.card-grid) instead of generic containers. - Keep selectors shallow; don’t write
@container (min-width: 60rem) { .app .layout .sidebar .nav .item { … } }. Your CPU sighed when you read that. - Use the
containershorthand for readability:container: card / inline-size;(name + type). MDN Web Docs
Copy-paste snippets (grab bag)
Card with media-aware layout
.card { container-type: inline-size; }
.card__media { aspect-ratio: 4/3; }
@container (min-width: 42rem) {
.card { display: grid; grid-template-columns: minmax(12rem, 20cqw) 1fr; gap: 1rem; }
}
Sidebar that gracefully disappears
.sidebar { container: rail / inline-size; }
@container rail (max-width: 24rem) {
.sidebar .ad, .sidebar .extra { display: none; }
}
Fluid hero without viewport hacks
.hero { container-type: inline-size; }
.hero h1 { font-size: clamp(1.25rem, 8cqw, 3rem); } /* scales with container, not window */
.hero p { max-inline-size: 70cqi; } /* readable line length */
FAQ
Are container queries just “media queries but smaller”?
Close. Media queries look at the viewport; container queries look at the nearest eligible container you declared. Different questions, different superpowers. MDN Web Docs
Can I target a specific container?
Yes—give it a name with container-name (or the container shorthand) and reference that name in @container. MDN Web Docs
What about browser support—can I ship it?
For size queries: yes, they’ve been broadly available in evergreen browsers since 2023-ish (always verify your matrix). Container query length units also enjoy wide support. MDN Web Docscaniuse.com
Are style queries production-ready?
Treat them as progressive enhancement; support varies. Keep an eye on MDN/browser notes.