Clamp Function

ELI5 — The Vibe Check

CSS clamp() sets a value that's fluid between a minimum and maximum. clamp(1rem, 2.5vw, 2rem) means 'at least 1rem, ideally 2.5vw, but never more than 2rem.' It's responsive typography and spacing in a single line. No media queries needed.

Real Talk

The CSS clamp() function accepts three values — minimum, preferred, and maximum — and resolves to the preferred value clamped between the min and max. It's commonly used for fluid typography, responsive spacing, and flexible layouts, replacing multiple media query breakpoints with a single declaration.

Show Me The Code

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

.container {
  padding: clamp(1rem, 3vw, 3rem);
  max-width: clamp(320px, 90vw, 1200px);
}

When You'll Hear This

"clamp() for font sizes means no media queries for responsive typography" / "I use clamp() for everything now — spacing, widths, font sizes"