Container queries changed how I build components

The problem with viewport breakpoints

A card does not care how wide the browser is. It cares how much room its parent gives it. For years we approximated that with viewport breakpoints plus a pile of modifier classes: card--narrow, card--sidebar, card--hero.

Containers as the unit of layout

Declaring a container turns the parent into a query target:

.card-grid { container-type: inline-size; }

@container (min-width: 28rem) {
  .card { grid-template-columns: 8rem 1fr; }
}

The same component now adapts anywhere you drop it — sidebar, modal, full-bleed grid — with zero props.

What to watch out for

• A container cannot query itself; query the parent.
• container-type: inline-size creates containment, so intrinsic height tricks can break.
• Name your containers when nesting: container-name: card-grid.

Where it pays off

Design systems. The moment a component is responsive to its own space, the consuming page stops being responsible for its layout.