CSS Clamp

ELI5 — The Vibe Check

clamp() is CSS's way of saying 'be this size, but never smaller than this and never bigger than that.' It's like a font size that grows with the screen but knows when to stop — the Goldilocks function. Not too small, not too big, just right.

Real Talk

CSS clamp(min, preferred, max) sets a value that scales fluidly between a minimum and maximum bound. Commonly used for responsive typography and spacing without media queries. The preferred value typically uses viewport units for fluid scaling.

Show Me The Code

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

When You'll Hear This

"Use clamp for fluid typography instead of five media queries" / "clamp(320px, 80%, 1200px) gives you a responsive container in one line"