Section padding (24px → 96px)
- Input
- min: 24px @ 320px viewport, max: 96px @ 1440px viewport
- Expected output
- --space-section: clamp(1.5rem, 5.45vw + 0.27rem, 6rem);
Token for vertical section padding. Scales proportionally.
fluid CSS spacing clamp padding gap
Fluid spacing with CSS clamp(): padding and gap that scale with the screen
Fluid spacing with `clamp()` applies the same logic as fluid typography to layout properties: padding, margin, gap, row-gap, column-gap. The result is a layout that breathes proportionally at any screen size — from 320px to 2560px — without a single media query.
Why fluid spacing improves the experience
- When section padding is fixed (e.g., 64px), on mobile it becomes proportionally huge and on ultra-wide screens it looks insignificant. With clamp, padding scales between, for example, 24px at 320px viewport and 96px at 1440px. The visual rhythm of the page stays coherent across the full range of devices.
- For design system tokens, define fluid variables in `:root`: `--space-section: clamp(24px, 4vw + 10px, 96px)`. Components use `padding: var(--space-section)` and the system scales automatically without any media queries in individual components.
Ready-made fluid spacing tokens
Cards grid gap (12px → 28px)
- Input
- min: 12px @ 375px, max: 28px @ 1280px
- Expected output
- --gap-cards: clamp(0.75rem, 1.74vw + 0.09rem, 1.75rem);
Responsive gap for grids. Avoids visual compression on small screens.
Full tool FAQ
It's a CSS function that constrains a value between a minimum and a maximum. In the middle it accepts any CSS expression — typically `viewport-width + rem-constant` for fluid typography.
Frequently asked questions
Does clamp accept mixed units (px and rem)?
Not directly in the same parameter. But the browser converts automatically before evaluating. `clamp(1rem, 2vw + 0.5rem, 3rem)` works perfectly — the browser uses px internally for comparison.
Can I use clamp with dvh/dvw for full-screen spacing?
Yes. Dynamic viewport units (dvh, dvw) work inside clamp. They are especially useful for hero section heights that should vary between devices and browser states.