Fluid Web Design: A Practical Guide
What fluid web design is, how it differs from fixed and adaptive layouts, and how to build fluid type and spacing with clamp() and viewport units.
6 min read - Updated 2026-06-18
Fluid web design builds layouts from relative, flexible units so the page scales smoothly with the viewport instead of snapping between fixed sizes. Done well, it removes most of the awkward gaps between breakpoints - the spots where designs usually break.
Fluid vs fixed vs adaptive
A fixed layout uses pixel widths and breaks outside its target size. An adaptive layout snaps between a few fixed designs. A fluid layout flexes continuously, so there is always a sensible result at every width.
Fixed: pixel widths, brittle outside the target
Adaptive: snaps between a few designed sizes
Fluid: scales continuously with relative units
Most modern responsive sites are fluid at their core
Build fluid type and spacing with clamp()
clamp(min, preferred, max) is the workhorse of fluid design. It scales a value with the viewport while clamping it between sensible bounds, so text and spacing grow smoothly without ever getting too small or too large.
font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem)
Use it for headings, gaps, and section padding
Combine with min(), max(), and viewport units for fluid grids
Prefer rem-based bounds for accessibility
Keep fluid layouts honest
Fluid does not mean unchecked. The whole point is the in-between widths, so you have to actually look at them - and at the extremes where clamps kick in.
Check the smallest and largest supported widths
Watch line length - cap it with max-width or ch units
Confirm clamps hit their bounds where you expect
Review several widths side by side, not one at a time
Release checklist
Use relative units (rem, %, vw, ch) over fixed pixels.
Apply clamp() for fluid type and spacing with safe bounds.
Cap line length for readability.
Review the in-between and extreme widths, not just breakpoints.
Frequently asked questions
What is fluid web design?
Fluid web design uses relative, flexible units so the layout scales continuously with the viewport rather than snapping between fixed sizes. It produces a sensible result at every width, including the gaps between breakpoints.
What is the difference between fluid and responsive design?
Fluid design is a technique - building with flexible units that scale continuously. Responsive design is the broader goal of adapting to any device, usually achieved by combining fluid layouts with media or container queries.
How does clamp() help with fluid design?
clamp(min, preferred, max) scales a value with the viewport while keeping it between bounds. It is ideal for fluid typography and spacing because text and gaps grow smoothly without becoming too small or too large.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.