06 / Responsive rules
Four rules, in order
Let content set the size
Intrinsic sizing first — min-content, fit-content, auto. Most layout bugs are a width someone declared that the content did not want.
Distribute the remainder with fr
fr is a ratio of free space, so it stays correct at any container width. Always wrap it: minmax(min(100%, 14rem), 1fr). The inner min(100%, …) is what stops overflow on narrow phones.
Scale continuously with clamp
Type and section padding interpolate rather than step. A heading that jumps two sizes at 768px reads as a bug; one that grows with the viewport does not.
Break on the container, not the viewport
A project card sits in a wide feed, a narrow sidebar, and an embedded widget. Container queries let one component answer all three. Reach for a viewport media query only for page-level chrome — the editor collapsing its panels into tabs is the legitimate case.