A card in a sidebar and the same card in a full-width grid can have the same viewport but radically different available space. Container queries solve that mismatch: the component responds to its containing block, not the browser window.
Establish one intentional boundary
.card-list { container-type: inline-size; }
.card { display: grid; gap: 1rem; }
@container (min-width: 42rem) {
.card { grid-template-columns: 12rem 1fr; align-items: center; }
}
inline-size is usually the right containment axis for a component that reflows horizontally. Put it on the layout owner, not every ancestor; too many containers make it unclear which dimension drives a rule.
| Requirement | Use |
|---|---|
| Hide global navigation on a phone | Media query |
| Put card image beside copy when its column grows | Container query |
| Size a label relative to its component | cqi container unit |
Migrate the component with the worst exceptions
Start from a stacked base layout, then add one wide-container change. Do not copy all existing viewport breakpoints into @container; the point is to express the point where the component itself becomes cramped or comfortable.
A container query only sees the nearest matching containment context. If a rule appears not to fire, inspect the parent that established
container-typebefore changing the breakpoint.
Container queries complement, rather than replace, responsive page design. Media queries decide the site shell; container queries make reusable pieces behave correctly after they move.