CSS Container Queries: The Layout Revolution

The Viewport Problem

Media queries respond to the viewport width. But components don't live in the viewport — they live in containers of varying sizes.

A sidebar card needs different styles than the same card in a main content area. Media queries can't distinguish between these contexts.

Enter Container Queries

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

@container card (min-width: 400px) { .card { display: grid; grid-template-columns: 200px 1fr; } }

@container card (max-width: 399px) { .card { display: flex; flex-direction: column; } } ```

Now the card layout adapts to its container, not the viewport.

Real-World Use Cases

1. Dashboard widgets — same component renders differently in 1-column vs 3-column grids
2. Product cards — horizontal in wide containers, vertical in narrow ones
3. Navigation — inline links collapse to a dropdown in narrow sidebars

Container Query Units

New units relative to the container:

.title {
  font-size: clamp(1rem, 3cqi, 2rem);
}

• cqi — 1% of container inline size
• cqb — 1% of container block size
• cqmin / cqmax — smaller/larger dimension

Browser Support

Container queries are supported in all modern browsers since 2023. You can use them in production today with zero polyfills.