CSS container queries for component-level responsiveness

Media queries only respond to viewport width, but components need to adapt based on their container's width. A card component should look different in a sidebar vs main content area regardless of screen size.

Use CSS container queries. (1) Define container: .card-wrapper { container-type: inline-size; container-name: card; }. (2) Query it: @container card (min-width: 400px) { .card { flex-direction: row; } }. (3) container-type: inline-size for width queries (most common), size for both dimensions. (4) Any element can be a container — you can nest containers. (5) Container query units: cqw (container width %%), cqi (inline size). (6) Browser support: all modern browsers since early 2023. (7) Can combine with media queries for progressive enhancement.

Media queries are viewport-centric. A component doesn't know or care about viewport size — it needs to respond to its own available space. Container queries bring true component-level responsiveness.