CSS Container Queries Complete Guide (2026)
CSS container queries let a component respond to its parent's size instead of the viewport. This complete 2026 guide covers container-type, named containers, container query units, and the new Baseline style queries.
Media queries were never about the viewport. They were a workaround — a fifteen-year hack for the fact that CSS couldn't ask the one question that actually mattered: *how big is my container?* Your card doesn't live in the viewport. It lives in a sidebar, a modal, a three-column grid. Container queries finally let it respond to its own available space, and in 2026 the whole feature set — size queries, style queries, even scroll-state queries — is here. This CSS container queries complete guide walks you through all of it, with runnable code. What you'll learn How container queries differ from media queries — and when each one wins How to declare a container with container-type ( inline-size vs size ) How to use named containers to target the right ancestor in nested layouts How container query units ( cqw , cqh , cqi , cqb ) give you fluid component typography How @container style() queries branch on custom property values (Baseline since May 2026) How @container scroll-state adds a sticky-header shadow with zero JavaScript (Chromium-only) CSS container queries complete guide 2026: container queries vs media queries — the decision table Container queries don't kill media queries. They answer different questions: media queries ask "how big is the viewport?", container queries ask "how big is my parent?". Here's the call: Scenario Media query Container query Verdict Page-level layout breakpoints (nav collapses at 768px) ✅ Asks about the viewport directly ❌ Awkward fit Media query Same card in a narrow sidebar and a wide main column ❌ Viewport tells you nothing about the sidebar ✅ Component adapts to its own space Container query A component library reused across products ❌ Forces library consumers to know breakpoints ✅ Component is self-responsive…