Intrinsic layout beats breakpoints

A breakpoint is a guess about the world. You pick 768px because a tablet was that wide once, and then every width you did not think about is untested. A layout with five breakpoints has six states you have checked and an infinity you have not, and the bugs live in between.

Intrinsic layout asks the content and the container to decide instead. Four tools do most of it.

clamp(min, preferred, max) gives you a value that scales continuously between two bounds. font-size: clamp(1.5rem, 1rem + 2vw, 3rem) is a heading that grows smoothly with the viewport and never goes below 24px or above 48px, no breakpoints, no jumps, and correct at every width including the ones you never tested. Use rem in the preferred term alongside vw so that the value still responds to the user’s own font size setting; a pure vw value ignores it, which is an accessibility problem.

minmax() with auto-fit gives you a grid that changes column count on its own, which you built in the grid chapter. min() and max() handle the one-sided cases: width: min(100%, 60ch) is "60 characters, but never wider than the container", which is a better line-length rule than any breakpoint and is one declaration.

And container queries handle the rest, the cases where a component needs a meaningfully different layout rather than a different size, which is what you saw in the last lesson.

Now the build. Fork the starter: a page with eleven media queries. Rebuild it with as few as you can. Aim for two or fewer, most layouts need one genuine structural change, from stacked to side-by-side, and everything else is sizing that can be continuous.

Test it the way breakpoint layouts are never tested: drag the window slowly from 320px to 1600px and watch for anything that jumps, overlaps, overflows or becomes unreadable. Any width where it looks wrong is a bug you would have shipped, and with eleven breakpoints there would have been several.