The CSS clamp() Function

Using `clamp()` to set values that scale fluidly between a minimum and a maximum, without media queries.

Content tagged clamp

• Tutorial:Fluid Typography and Spacing with clamp()

  One clamp() declaration scales type, padding, and gaps smoothly — no breakpoint ladder.

  clamp(min, preferred, max) — with a preferred value built from rem plus a viewport or container-relative unit — scales font-size, padding, and gaps continuously between a floor and ceiling instead of jumping at fixed breakpoints, replacing a media-query ladder with one line per property.

• Tutorial:min(), max(), and clamp() — CSS's Value-Bounding Functions

  Three comparison functions that pick a value from a rule, without a single media query.

  min(), max(), and clamp() pick the smallest, largest, or a bounded value from a list of CSS expressions at the point of use, replacing media-query-driven overrides for readable measures, safe-area-aware insets, and bounded widths with one declaration each.