CSS Foundations
CSS Math Functions
Build fluid dimensions and dependable constraints by combining calc(), min(), max(), and clamp() with relative CSS units. It shows how calc(), min(), max(), and clamp() express fluid relationships while preserving readable minimum and maximum limits.
CSS math functions allow the browser to calculate a value from the space and variables available at layout time. They replace hard-coded intermediate sizes with an explicit relationship.
A fluid value still needs design boundaries. A heading that grows with the viewport needs a readable minimum and a maximum that preserves hierarchy; a content area may need to subtract gutters while refusing to exceed its preferred measure. clamp(), min(), and max() state those boundaries directly. This topic also connects with CSS Units and Container Queries.
Calculate instead of guessing
Example
css
.main {
min-height: calc(100dvh - var(--header-height));
}
.card {
width: min(100%, 34rem);
padding: max(1rem, 2vw);
}calc() combines compatible values. Addition and subtraction require whitespace around the operator. Multiplication and division are available in newer implementations but should be checked against the project’s browser requirements.
Fluid values with limits
Example
css
h1 {
font-size: clamp(2rem, 1.2rem + 3vw, 4.5rem);
}
.layout {
gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}clamp(minimum, preferred, maximum) is useful when a value should respond to available space without becoming too small or too large.
Rounding and advanced calculations
Modern math functions include round(), mod(), rem(), abs(), sign(), trigonometric functions, powers, roots, and logarithms. Use them when the relationship belongs in CSS and provide a simpler declaration before features with limited support.
Example
css
.meter {
--steps: 8;
width: round(nearest, 63%, calc(100% / var(--steps)));
rotate: calc(sin(30deg) * 20deg);
}Math Function Reference
| Function | Purpose | Example |
|---|---|---|
| calc() | Combines compatible values in a calculation. | width: calc(100% - 2rem) |
| min() | Chooses the smallest argument. | width: min(70rem, 100%) |
| max() | Chooses the largest argument. | padding: max(1rem, 3vw) |
| clamp() | Sets a minimum, preferred value, and maximum. | font-size: clamp(1rem, 2vw, 1.5rem) |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Math Functions example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.main {
min-height: calc(100dvh - var(--header-height));
}
.card {
width: min(100%, 34rem);
padding: max(1rem, 2vw);
}
h1 {
font-size: clamp(2rem, 1.2rem + 3vw, 4.5rem);
}
.layout {
gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}
.meter {
--steps: 8;
width: round(nearest, 63%, calc(100% / var(--steps)));
rotate: calc(sin(30deg) * 20deg);
}
</style>
</head>
<body>
<main class="main"><section class="layout"><article class="card"><h1>Fluid type and spacing</h1><p>Resize the preview to see clamp() stay within its limits.</p></article></section></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| calc() | 26 | 12 | 16 | 7 |
| min(), max(), and clamp() | 79 | 79 | 75 | 13.1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Prefer a readable formula tied to a design constraint. A complicated expression that merely reproduces a handful of breakpoints is harder to maintain than the breakpoints.
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Use CSS math to express limits and relationships instead of adding breakpoints for every intermediate size.
Keep formulas short enough that another developer can explain them without a calculator. When a relationship becomes difficult to name or test, a small number of clear media or container queries may communicate the design better than a single elaborate expression.