CSS Container Queries: Responsive Components by Their Own Size

A card can appear in a wide main column on one page and a narrow sidebar on another. A media query sees the viewport; a container query lets the component respond to the space its parent actually gives it.

Establish a query container

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

.card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

The element with container-type creates the context that descendants query. The threshold should follow the component's content, not a device label. MDN's container-query reference covers named containers and query features.

Design around content constraints

Test the component in the narrowest and widest places it appears. Long headings, translated text, zoom and user font settings can change how much room it needs. Avoid relying on a single pixel-perfect breakpoint that only matches one screenshot.

Container queries complement, rather than replace, viewport media queries. Use a viewport query for page-level navigation or global layout, and a container query for a reusable card, panel or toolbar whose parent size varies.

Keep a fallback that remains usable

The base style should work before the query applies. Avoid hiding essential content in one layout. Check browser support against the audience and project requirements, and keep the simple single-column presentation as the fallback.

Reusable components become easier to place when they can adapt to their own available space. The tradeoff is an extra layout rule to maintain, so introduce it where the same component genuinely appears in different container widths.