responsive-layoutlisted

# Responsive layout Responsive is not a list of breakpoints. It is a set of decisions about what changes, when, and why. ## Design from the constraints, not the mockup width The mockup is 1440px. The users are not. The four conditions that break most layouts: 1. **320px wide** — the narrowest width WCAG reflow requires support for. 2. **200% browser zoom** — an accessibility requirement, and it behaves like a narrow viewport with large text. This is the one nobody tests. 3. **The longest realistic content**, not the mockup's short label. 4. **A different font size** — a user with a 20px browser default, or a language whose words are 40% longer. ## Intrinsic sizing before media queries Most "responsive" work needs no breakpoint at all. Let content determine size: - `flex-wrap` with a `min-width` on items — they reflow when they no longer fit, at the width where it actually matters rather than an arbitrary one. - `grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))` — a grid that adapts its column count with no media query. - `min()`, `max()`, `clamp()` for fluid sizing — `clamp(1rem, 2.5vw, 2rem)` scales type without steps. - `min-width: 0` on flex children when text must be allowed to shrink — the default `min-width: auto` is why long text overflows a flex container instead of truncating. A layout built this way survives content lengths you did not anticipate. A breakpoint-driven layout only handles the widths you enumerated. ## Container queries where the comp