CSS Container Queries Are a Game Changer

Media queries have been CSS's responsive design primitive for 15 years — and they've always had a fundamental flaw. They respond to the viewport, not the container. A card component doesn't know how wide its parent is; it only knows how wide the window is. Container queries fix this.

The Problem with Media Queries for Components

Imagine a card component that appears in a 3-column grid on desktop and a 1-column layout on mobile. With media queries, you're guessing breakpoints based on viewport width and hoping the component's context aligns. Put the same card in a sidebar, and your breakpoints are completely wrong.

Container Queries in Practice

With container queries, the card responds to the size of its own container — not the viewport. The component becomes truly self-contained and reusable regardless of where it's placed in the layout.

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

.card { display: block; }

/* Responds to the container, not the viewport */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: auto 1fr;
  }
}

Container Query Units

Alongside container queries, you get new units: cqw (container query width), cqh (container query height), and more. These let you size elements proportionally to their container — not the viewport — unlocking fluid typography and spacing systems scoped to components.