Container Queries: Component-Centric Grids

Historically, responsive design depended on Media Queries, which evaluate the global browser viewport width. This created a major flaw in modular design systems:

A card component placed in a wide sidebar had to render in a cramped space despite the browser viewport being 1440px wide.

The Container Query Revolution (@container)

Container queries allow a component to inspect the width of its immediate parent container rather than the screen:

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

This makes components genuinely modular: a card adapts its grid layout automatically regardless of whether it lives in a narrow sidebar or a wide main feed.