Fluid Spacing & Sizing

Fluid spacing means a margin, padding, or gap value that scales smoothly as the viewport changes, instead of jumping abruptly at each breakpoint. The tool that makes this practical is clamp(), which lets one line of CSS replace a whole stack of @media rules that each nudge the same value a little further.

The clamp() Recap

clamp(min, preferred, max) picks the preferred value, but never lets it go below min or above max. When the preferred value is written with viewport units (vw), the result scales continuously with screen width between the two bounds, then holds steady past them.

CSS

.section {
  /* never smaller than 16px, never bigger than 64px,
     scales smoothly with viewport width in between */
  padding: clamp(16px, 4vw, 64px);
}

Fluid Padding & Margin Without Breakpoints

A traditional responsive approach sets a small padding on mobile and overrides it at each breakpoint going up:

CSS

/* The old way: several fixed jumps */
.card {
  padding: 16px;
}
@media (min-width: 640px) {
  .card { padding: 24px; }
}
@media (min-width: 1024px) {
  .card { padding: 40px; }
}

The fluid equivalent scales continuously and needs no breakpoints at all:

CSS

/* The fluid way: one rule, smooth scaling */
.card {
  padding: clamp(1rem, 2vw + 0.5rem, 2.5rem);
}

.section {
  margin-block: clamp(2rem, 6vw, 6rem);
}

.layout {
  gap: clamp(0.75rem, 2vw, 2rem);
}

Mixing a fixed unit (rem) into the preferred value — 2vw + 0.5rem instead of a bare 4vw — is a common refinement: the fixed part keeps a sensible floor of "real" spacing even at very small viewport widths, while the viewport-relative part still drives most of the scaling.

Worked Example: A Fluid Card Grid

CSS

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1rem, 4vw, 3rem);
}

.card {
  padding: clamp(1rem, 1.5vw + 0.5rem, 1.75rem);
  border-radius: clamp(8px, 1vw, 16px);
}

Resize the browser and every spacing value — the grid's outer padding, the gap between cards, each card's own inner padding, even the corner radius — grows and shrinks together in proportion, instead of a few values jumping at arbitrary breakpoints while others stay frozen.

Choosing Sensible Min/Max Bounds

Pick the min bound as the smallest spacing that still looks intentional on a small phone — usually your existing mobile value.
Pick the max bound as the largest spacing you want even on an ultra-wide monitor — fluid values keep growing with vw alone, so max prevents excessive whitespace.
Test at the extremes first (narrowest and widest realistic viewport), then check the scaling in between — the middle almost always looks fine once the ends are right.

Combine with fluid typography for a cohesive system

Fluid spacing pairs naturally with [fluid typography](/css/fluid-typography) — when both font-size and surrounding spacing scale together using the same clamp() approach (often even the same custom properties), the whole design feels like one continuously-scaling system rather than text and spacing drifting out of proportion with each other at different viewport widths.