12→4 · counts bendTokens · holdBreak · where content breaks
Everything so far assumed a stage of one size. Reality hands you every size at once — a 360px phone in one hand, a 4K monitor on the desk, and every width in between as someone drags a window. A fixed grid dies at the first screen it never met.
The responsive answer is not a hundred layouts. It is one system with two kinds of parts: counts that bend per screen, and tokens that hold everywhere. This article is about knowing which is which.
01 · The principle
Bend counts, hold tokens
When the viewport shrinks, the 12-column desktop grid collapses to 8, then to 4. That is the count bending. What never bends: the gutter stays a spacing token, the margins stay on the scale, spans stay spans. A card that spans 4 needs no edits anywhere — at 12 columns it sits three abreast, at 8 two abreast, at 4 full width.
This is why the series built in this order. Tokens and spans are screen-independent decisions; only the count belongs to the viewport. Systems survive change exactly where they separated the durable from the contextual.
The law
The counts bend; the tokens hold.
02 · Feel it bend
Squeeze the page
Drag the width. Watch the count step from 12 to 8 to 4 — and watch the six span-4 cards reflow from three abreast to two to a stack, without one of them being edited. The spans and gutters never change; only the count answers the viewport.
Squeeze the page
One hero (span 12) and six cards (span 4 each). Drag from desktop to phone.
960px - 12 columns
03 · Where to break
Break where the content breaks
The lab above stepped at 560 and 860 — not because any device is that wide, but because that is where this content failed: below 860 three cards turn cramped; below 560 even two do. That is the whole doctrine of breakpoints: resize until the content fails, break there, and let fluid tracks absorb everything in between.
Device-name breakpoints — 768 for “tablet”, 1024 for “desktop” — age like fruit. Devices ship yearly; a card’s minimum usable width and a paragraph’s maximum measure are durable truths about the content itself. Each breakpoint is also a maintenance contract — a fork you will design and test forever — so the fewer the content demands, the better.
Same content, three counts — 12, 8, 4. The amber card was never edited; the count did all the adapting.
04 · The grid that counts itself
Fluid tracks & auto-fit
Between breakpoints, widths should flow, not sit fixed — that is what 1fr buys: tracks as shares of free space. Go one step further and the grid needs no breakpoints at all: repeat(auto-fit, minmax(150px, 1fr)) is a contract — every card at least 150px, and the grid itself counts how many fit at any width.
Card walls, galleries, tag clouds — anything homogeneous — should self-count. Save written breakpoints for the moments a layout genuinely changes shape, not just count.
The self-counting grid
Zero breakpoints written. Drag the width and let minmax + auto-fit do the arithmetic.
Mobile-first is this series’ default, but it is one of four honest strategies. Desktop-first suits dense enterprise tools (Jira, Bloomberg) — and tends to produce compromised phones. Mobile-first suits consumer products — and can leave desktops feeling thin. Adaptive systems (Apple, Material, Fluent) make every breakpoint a first-class layout governed by shared rules. Device-specific design — watches, cars, medical monitors — abandons responsiveness entirely: each form factor gets its own experience.
And width is only the loudest signal. Mature systems also read height (landscape is not portrait), input method and pointer precision (touch needs bigger targets), hover support (menus change), safe areas (notches, gesture bars), orientation and folding, and user density preference (compact / comfortable / spacious). The craft is defining layout behaviors — “below 768 the sidebar hides; below 480 it becomes bottom navigation” — rather than redesigning the page five times.
desktop-firstremove downenterprise density; risk: compromised mobile
adaptiverules per classevery breakpoint first-class; most design systems
device-specificseparate buildswatch / car / monitor — different experiences entirely
360
design here first, enhance up
2–3
breakpoints most pages ever need
0
horizontal scrollbars, ever
05 · What never bends
The promises
Responsiveness has hard floors that no viewport excuses. The reading measure stays humane — roughly 45–75 characters — whatever the count. Tap targets stay at least 44px. The page never scrolls sideways. And the tokens keep drawing from the one scale, so the phone layout still feels like the same product as the desktop one.
Design at 360 first — the small screen is the honest one. It forces the hierarchy to declare what actually matters, and a layout that survives 360 almost never fails on the way up. The reverse trip — desktop squeezed downward — is where cramped, clipped, sideways-scrolling pages come from.
The law
Bend the counts, never the promises.
Seen in the wild
Two phones, two fates
The same desktop page arriving on a 360px phone — once through a responsive system, once shrunk to fit.
Responsive
The count bent to 4
Cards stacked, text at a readable size, the button a full thumb wide. Same tokens as desktop — recognisably the same product.
Shrunk to fit
The desktop, miniaturised
Twelve columns crushed into a phone: unreadable text, untappable targets, and a pinch-zoom apology instead of a layout.
One article left
The machinery is complete: a unit, edges, a scaffold, its families, and now its response to the viewport. What remains is the part machines cannot do: composing with the space between things. The capstone: composition & white space.
The real references
Where the field agrees
Four sources worth reading in full — the systems and research this article stands on.
Desktop, merely squeezedThree columns stack into one enormous page, navigation vanishes into a hamburger, the primary action sinks below ten screens of scroll.FixAt each breakpoint decide per element: remain, move, merge, collapse, become a sheet, change representation, or earn its own screen. Reprioritise — never just wrap.
Famous-device breakpointsThe layout visibly fails at 930px but waits for the framework’s 768 to change — because the defaults were copied, not derived.FixResize continuously; break where THIS content breaks. Devices ship yearly, your content’s failure points are durable.
Layout shift during loadingImages arrive late, text jumps, the button moves just as the thumb lands on it.FixReserve every medium’s dimensions up front — aspect-ratio boxes and skeletons that hold the FINAL structure, not an approximation.
Designed for the perfect screenshotSix-word headlines and balanced cards in the mockup; real data brings 80-character titles, missing images and translations.FixStress-test as a gate: no content, maximum content, long words, localisation, 200% zoom, missing media, error states.
The vocabulary
The Responsive glossary
Six words for grids that meet the viewport. Tap a card to flip it.
The nuance
Questions you actually ask
Train the eye
Run the numbers
Ten questions in mixed formats — multiple choice, multi-correct, fill-in, match, order, read-think-connect and write-your-own — each with layered hints: a nudge, the reasoning, then a deeper connection. Served from the question bank, never hardcoded.