CSS calc(), min(), max() and clamp(): Math and Fluid Sizes

CSS can do arithmetic. The math functions let you combine units, set limits, and create sizes that scale smoothly with the screen without media queries.

calc()#

calc() performs +, -, * and / and can mix units:

.bar { height: 30px; margin-bottom: 6px; background: #2f5fe0; color: white; padding-left: 8px; font: 13px/30px monospace; }

<div class="bar" style="width: calc(100% - 80px)">calc(100% - 80px)</div>
<div class="bar" style="width: calc(50% + 2rem)">calc(50% + 2rem)</div>
<div class="bar" style="width: calc(100% / 3)">calc(100% / 3)</div>

Rules:

• + and - must have spaces around them: calc(100% - 80px). Without spaces, 100%-80px is read as a single invalid value.
• In *, at least one side must be a plain number; in /, the right side must be a number.
• calc() works anywhere a length, number, angle or time is allowed, and pairs well with variables: calc(var(--space) * 2).

min() and max()#

min() uses the smallest of its values; max() the largest:

.container {
  width: min(100% - 2rem, 900px);   /* never wider than 900px, keeps 1rem gaps on small screens */
}
.button {
  padding: max(0.5rem, 1vw);        /* at least 0.5rem */
}

A helpful way to read them: min() sets a maximum ("this, but no more than that"), and max() sets a minimum.

clamp()#

clamp(MIN, PREFERRED, MAX) uses the preferred value but keeps it between the minimum and maximum. It is perfect for fluid typography:

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

<h1>I grow with the frame width</h1>
<p>Resize your browser window: the heading scales smoothly, but never below 1.5rem or above 3rem.</p>

• 1.5rem: the smallest size, on phones.
• 4vw + 0.5rem: the preferred size, which grows with the viewport. Adding a rem part means the text still responds to the user's font-size setting and browser zoom.
• 3rem: the largest size, on wide screens.

Fluid spacing#

clamp() works for any length:

section {
  padding-block: clamp(2rem, 6vw, 6rem);
}
.grid {
  gap: clamp(0.75rem, 2vw, 2rem);
}

Combining them#

A centered page container in one line, with side gutters on small screens:

.wrapper {
  width: min(1100px, 100% - 2 * clamp(1rem, 4vw, 3rem));
  margin-inline: auto;
}

Other math functions#

CSS also has round(), mod(), rem(), abs(), sign(), trigonometric functions such as sin() and cos(), and pow() and sqrt(). They are newer, so check support before relying on them, but calc(), min(), max() and clamp() work in every current browser.

Practice#

h2 { font-size: clamp(1.25rem, 3vw + 0.75rem, 2.25rem); }
.article { width: min(70ch, 100% - 2rem); margin-inline: auto; }
.sidebar { width: calc(100% / 3 - 1rem); background: #eef3ff; padding: 6px; }

<div class="article">
  <h2>Fluid heading</h2>
  <p>This article column is limited to about seventy characters per line, but on small screens it keeps a 1rem gap on each side.</p>
</div>
<div class="sidebar">Sidebar</div>

Key takeaway#