CSS clamp() and Fluid Design

Introduction

CSS clamp() sets a value that scales fluidly between a minimum and maximum, based on a viewport-relative preferred value. Combined with min() and max(), these functions eliminate most responsive breakpoints.

The most common use case is fluid typography — text that grows smoothly with the viewport instead of jumping at breakpoints. But clamp() works for any length value.

The formula: clamp(minimum, preferred, maximum). The browser uses the preferred value unless it's below min or above max.

Key Concepts

clamp() Syntax

h1 { font-size: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.container {
  padding: clamp(1rem, 3vw, 3rem);
  max-width: clamp(20rem, 90vw, 70rem);
}

min() and max()

.sidebar { width: min(300px, 100%); }
.content { width: max(50%, 300px); }

Fluid Typography Scale

:root {
  --text-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --text-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --text-lg: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --text-xl: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
}

Practical Examples

1. Fluid Spacing

:root {
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-md: clamp(1rem, 2vw, 1.5rem);
  --space-xl: clamp(2rem, 5vw, 4rem);
}
.section { padding-block: var(--space-xl); }

2. Responsive Grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

3. Container with Fluid Padding

.container {
  width: min(65ch, 100% - clamp(2rem, 5vw, 6rem));
  margin-inline: auto;
}

Best Practices

• Use rem for min/max for accessibility (respects user font size).
• Use utopia.fyi to calculate fluid scales.
• Combine vw + rem in the preferred value.
• Test at extreme viewport sizes.
• Use clamp() for spacing, not just typography.
• Prefer min(value, 100%) for upper bounds.

Common Pitfalls

1. Only vw in preferred ignores user font preferences.
2. Min and max too far apart — disconnected scaling.
3. clamp() doesn't work in media query conditions.
4. Not testing with browser zoom at 200%.

Browser Support

clamp(), min(), max(): Chrome 79+, Safari 13.1+, Firefox 75+, Edge 79+. ~96% support.

Related Guides

• CSS Custom Properties — fluid tokens as variables
• Responsive Design Strategy — fluid reduces breakpoints
• Typography & Font Pairing — fluid type scales