The CSS math functions that write responsive rules for you

Responsive design has always meant juggling breakpoints, media queries, and hand-tuned values. The CSS math functions min(), max(), and clamp() shift part of that work onto the browser. All three are supported in current Chrome, Edge, Firefox, and Safari, and they let you express sizing, spacing, and typography rules that adapt automatically.

These functions are part of the CSS Values and Units Level 4 specification. Like calc(), they accept mathematical expressions using addition, subtraction, multiplication, and division, and they can be used anywhere a <length>, <percentage>, <number>, <angle>, <time>, <frequency>, or <integer> is valid.

How the functions differ

min() takes a comma-separated list of values and resolves to the smallest one. For instance, width: min(1rem, 50%, 10vw) asks the browser to compute each candidate and use whichever comes out smallest for the element's width.

The min() function selects the minimum value from a list of options in this Codepen demo.

max() does the inverse: it selects the largest value from its argument list.

The max() function selects a value from a list of options in this Codepen demo.

clamp() combines both behaviors with three arguments: a minimum value, an ideal value, and a maximum value. The browser uses the ideal value when it falls between the two bounds and clamps to the nearest bound otherwise.

The clamp() function keeps its value between the specified minimum and maximum in this Codepen demo.

The functions compose freely. You can use them standalone, wrap expressions in calc(), or nest them: font-size: max(min(0.5vw, 1em), 2rem) is valid.

Keeping text lines at a readable width

Classic typography guidance puts comfortable line length between 45 and 75 characters per line. Using clamp() with the ch unit — which measures the advance width of the character 0 — gives you a paragraph that scales with its container while never falling out of that range.

p {
  width: clamp(45ch, 50%, 75ch);
}

That rule prefers a 50% width. If 50% resolves below 45ch, the clamp() floor kicks in; if it exceeds 75ch, the ceiling applies.

Use the clamp() function to set a minimum and maximum width. See Demo on Codepen.

The same logic can be expressed with a single function when you only need one bound. To cap an element at 75ch but otherwise let it fill half its container, use width: min(75ch, 50%).

Use the min() function to set a maximum width.

To guarantee a legible minimum width, use width: max(45ch, 50%). The browser picks the larger of the two, so the element never shrinks below 45ch.

Use the max() function to set a minimum width.

Fluid padding without breakpoints

max() is also useful for spacing that adapts to the viewport. A pattern shared by CSS Tricks reader Caluã de Lacerda Pataca keeps a comfortable minimum padding while allowing extra breathing room on wide screens.

The technique centers content by subtracting its declared width from the viewport: calc((100vw - var(--contentWidth)) / 2), or max(2rem, 50vw - var(--contentWidth) / 2). Applied in a stylesheet, it looks like this:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
Set a minimum padding for a component using the max() function. See Demo on Codepen.

True fluid type

Fluid typography — type that scales smoothly with the viewport — gained traction through a technique popularized by Mike Riethmeuller. Earlier approaches required verbose style strings and breakpoint overrides. clamp() collapses that into a single declaration: a minimum size, an ideal viewport-relative size, and a maximum size.

Use clamp() to create fluid typography. See Demo on Codepen.

For a title, that might mean a minimum of 1.5rem, a maximum of 3rem, and an ideal scale of 5vw. The browser interpolates between the bounds as the viewport changes, with no media queries involved:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}