CSS Container Queries: Style Components By Parent Size, Not Viewport

Media queries respond to **viewport** size. **Container queries** respond to the size of a containing element. The CSS Containment Module Level 3 defines `@container` and properties like `container-type` and `container-name`. As of 2026, container queries are baseline in current evergreen browsers (verify on `caniuse.com` for your support matrix).

A parent establishes a containment context with `container-type: inline-size` (or `size`). Descendants use `@container (min-width: 400px) { ... }` to switch layouts. Named containers disambiguate nested cases.

This fixes a long-standing component problem: a card in a narrow sidebar and the same card in a wide main column can adopt different internal layouts without global breakpoint hacks.

Pair container queries with intrinsic sizing and modern layout (flex, grid). Read the spec text on `drafts.csswg.org` and MDN reference pages when tuning fallbacks for older browsers.