08 · Clamp

Clamp

Responsive values without media queries

Wide support (Chrome 79+)

← Index

Fluid typography

This text scales without media queries

With clamp(1rem, 4vw, 3rem) the size grows with the viewport, with a safe minimum and maximum.

font-size: clamp(1rem, 4vw, 3rem)

Fluid spacing

The gap can also be fluid: clamp(8px, 2vw, 24px).

gap: clamp(8px, 2vw, 24px)

Responsive layout

This box's width adjusts with clamp() instead of breakpoints.

Fluid width: 280px ↔ 600px

width: clamp(280px, 50vw, 600px)

css

/* tipografía fluida — sin media queries */
.clamp-text {
  font-size: clamp(1rem, 4vw, 3rem);
}

/* espaciado fluido entre elementos */
.clamp-gap {
  display: flex;
  gap: clamp(8px, 2vw, 24px);
}

/* ancho fluido de un contenedor */
.clamp-width {
  width: clamp(280px, 50vw, 600px);
}

An honest note on support

Many of these APIs are recent and not yet in every browser (see the pill on each section). The nice part is they all degrade gracefully: the carousel still scrolls, the accordion opens/closes, the textarea works — just without the animated "plus".