Fluid layout interpolates as width changes
Aliases: fluid layout · percentage columns · continuous reflow
What it is
The window grows one pixel; columns, images and leftover air grow a little — no snap onto another box tree. That is fluid: percentages, flex, min/max, clamp; layout interpolates along width. A three-column gallery is ~200 px a column at 700 and ~330 at 1100, images sparse and huge, and no breakpoint ever fired.
Adaptive swaps the box tree at a breakpoint. They can mix. Fluid’s own disease is that in-between states nobody designed still ship.
Why it happens
Columns are written as fractions of leftover space. Width moves, the fraction moves, measure, image size and empty move together. Every width is a first-class citizen; you are not only serving two artboards. Fractions have no taste: 2.4 cards plus a sliver, body stretched to ninety characters, a hero crushing type into a ribbon, all happen smoothly.
Fluid does not decide “at which width this becomes two columns.” It only stretches this structure. Changing structure is the snap’s job.
Where it stops holding
Type has a comfortable measure; past it you change structure or cap max-width. Pure fluid will pull an article into a strip. Fixed-pixel controls (some native pickers, ads) do not interpolate and poke hard blocks through a fluid ground. Print and pixel-art games do not run on fractions.
On very narrow widths a fractional column falls below content min-width and overflows sideways. Fluid needs a floor; it is not infinitely divisible.
Applying it
- Give fluid modules a floor and a ceiling (min-width, max-width, clamp) so measure and card width stay in a livable band.
- Admit that “fluid only” will turn ugly at some width; find that width on purpose, then cap it or hand it to a snap.
- How to check: drag slowly and confirm columns do not suddenly change count and the nav does not suddenly become a hamburger — that is fluid. Then stop at three widths that never had an artboard and measure line length, leftover slivers, stretched images. Unreadable, or a half object: add a constraint here, rather than a decorative viewport breakpoint.