Every component library has this scar: the card that looks perfect in the main column and broken in the sidebar. Media queries cannot help, because the viewport is the same in both cases—it is the container that changed. For fifteen years we papered over this with modifier classes: .card--narrow, .card--sidebar, prop-driven variants.

Container queries end the workaround. A component can now respond to the width of the box it actually lives in.

The two-line setup

/* 1. The parent declares itself a container */
.card-slot { container-type: inline-size; }

/* 2. The component responds to ITS container */
@container (min-width: 420px) {
  .card { grid-template-columns: 160px 1fr; }
}

Drop that card into the main column: horizontal layout. Same card in the sidebar: stacked. Nobody passes a variant prop; the CSS simply knows.

“A component that queries the viewport is asking a stranger for directions.”

Container units and the composition win

Alongside queries come units: cqw and cqi are percentages of the container—so typography can scale with the component, not the window. A headline set in clamp(18px, 5cqi, 32px) is big in wide slots and modest in narrow ones, automatically.

The architectural payoff is composability. A container-queried component is truly portable: marketing can drop it into any column of any landing page and it adapts. Design systems stop shipping layout variants and start shipping components that observe their world. That is what “reusable” was always supposed to mean.