A year ago container queries shipped in every browser. I’ve been waiting for an excuse to stop using media queries for component-level layout. Here’s what changed in my workflow.

The shift

Before: my Card component had three sizes, each with its own media-query’d breakpoint that assumed it knew what the viewport looked like. It didn’t, usually.

After: the Card asks its own container how wide it is. It restyles itself based on the room it’s actually in. The same component renders differently in a sidebar vs. a full-width grid vs. a modal.

What I learned

Container queries are not a drop-in replacement for media queries. The page-level layout still belongs to viewport breakpoints — that’s the right tool for ‘is this a phone or a desktop’.

Container queries are for components. Use them to make a component robust enough to drop anywhere without rewriting it.

A tip

Set ‘container-type: inline-size’ on the parent, not the component itself. Otherwise the component can’t measure its own children. This took me an embarrassing amount of time to figure out.