responsive-container-querieslisted

<!-- last-verified: 2026-07 --> # Responsive container queries Media queries ask how big the *viewport* is; container queries ask how big the *component's container* is. A card in a sidebar and the same card in a hero should lay out differently because their containers differ — the viewport can't tell you that. Reach for container queries whenever a component is reused at different widths. ## 1. Container size queries — production-safe, zero polyfill Baseline support: **Chrome/Edge 105+, Safari 16+, Firefox 110+**. No polyfill needed; ship them directly. ```css .card-wrap { container-type: inline-size; } /* establish a query container */ @container (width > 700px) { .card { grid-template-columns: 1fr 2fr; } /* responds to the wrap, not the page */ } ``` - **`container-type: inline-size`** makes an element a query container measured on its inline (usually horizontal) axis. Set it on the parent you want to measure against, then query with `@container`. - **Scoped container units** resolve against the nearest query container, not the viewport: `cqw` / `cqh` (1% of container width / height), `cqi` / `cqb` (inline / block size). Use these instead of `vw`/`vh` inside a component so the value tracks the container. ## 2. Fluid typography with clamp() Scale type smoothly between a floor and a ceiling instead of snapping at breakpoints: ```css font-size: clamp(1rem, 0.75rem + 1.5vw, 1.5rem); /* min, preferred, max */ ``` **CRITICAL — build clamp() fr