CSS Container Queries: Designing Inside Component Boundaries

For years, we've relied on media queries to build responsive layouts. But media queries only know about the viewport size, not the container size. Container Queries change everything.

The Problem with Media Queries

Imagine a Product Card component. It looks great in a 3-column grid on desktop. But what if you put that same card in a narrow sidebar? Even though the viewport is large, the container is small. A media query won't help you here—it thinks you're on a desktop.

Introducing `@container`

By defining a container type, you unlock the ability to write CSS that responds to the parent element's width instead of the window.

/* Define the container */
.product-grid {
  container-type: inline-size;
}

/* Query the container */
@container (max-width: 400px) {
  .product-card {
    flex-direction: column;
  }
}

This makes components truly modular. You can drop a component anywhere, in any layout, and it will adapt perfectly to the space it's given. It's the ultimate decoupled architecture.