CSS Container Queries: The Layout Primitive We Needed

Viewport media queries lied to us. Components finally respond to their actual parent.

For a decade we hacked @media rules to approximate component behavior. Container queries end that fiction.

Why viewport queries fail

A card in a sidebar and a card in a hero grid share the same viewport width but wildly different available space. Container queries measure the box that matters.

Practical patterns

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

@container (min-width: 400px) {
  .card-title { font-size: 1.25rem; }
}

Design systems now ship container-aware tokens alongside breakpoints—two axes, zero guesswork.

Design ops win

Figma components map cleaner to CSS when designers think in containers, not arbitrary device presets.