Container queries in production: notes after six months

Container queries have been supported by every major browser for a while now, and I have used them in a handful of projects since last autumn. A few notes.

The mental shift

A media query asks “how wide is the viewport?”. A container query asks “how much room does this component have?”. A card that lives in a narrow sidebar on one page and a wide grid on another can now adapt without any knowledge of the page around it.

.card-wrap { container-type: inline-size; }
@container (min-width: 32rem) {
  .card { display: grid; grid-template-columns: 8rem 1fr; }
}

Where it shines

• Reusable components placed in several layouts.
• Design-system work, where a component should not care about its parent.
• Removing a pile of “modifier” classes that existed only to handle context.

Where I still use media queries

Page-level decisions — navigation collapsing, global spacing, print styles — remain viewport concerns. Container queries complement media queries rather than replace them.

Gotchas

An element cannot query its own size, so you need a wrapper with container-type. Setting it also establishes containment, which can change how children are laid out. Name your containers once you have more than two.