CSS Tutorial
CSS Math Functions
CSS math functions let you compute lengths directly in your stylesheet, mixing units and adapting to the viewport without media queries. calc() does arithmetic, min() and max() pick a smaller or larger value, and clamp() locks a value between a floor and a ceiling. Together they make truly fluid, responsive layouts. This guide covers each with runnable examples.
Why Math Functions?
Sometimes a value depends on a calculation - full width minus a sidebar, or a font that grows with the screen but never gets too big. CSS math functions compute these at render time, even mixing units like percentages and pixels that you could never add manually. They often replace a stack of media queries with one elegant line.
| Function | What it does |
|---|---|
| calc() | Performs +, -, *, / arithmetic, mixing units |
| min() | Returns the smallest of the given values |
| max() | Returns the largest of the given values |
| clamp(min, ideal, max) | Keeps a value between a lower and upper bound |
calc() - Arithmetic in CSS
calc() evaluates a math expression. The classic use is subtracting a fixed amount from a percentage, such as full width minus a fixed gutter. Always put spaces around + and - operators, or the expression will fail to parse.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; }
.full { width: 100%; background: #e2e8f0; padding: 8px; box-sizing: border-box; }
.almost { width: calc(100% - 80px); background: #0f766e; color: #fff; padding: 8px; margin-top: 8px; box-sizing: border-box; }
</style>
</head>
<body>
<div class="full">width: 100%</div>
<div class="almost">width: calc(100% - 80px)</div>
</body>
</html>The + and - operators inside calc() require a space on both sides. calc(100%-80px) is invalid, but calc(100% - 80px) works. The * and / operators do not have this requirement.
min() and max()
min() returns the smallest value from a list, and max() the largest. A common pattern is width: min(600px, 100%), which reads as: be 600px wide, but never wider than the container. max() is often used to enforce a minimum size, like max(50%, 300px).
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; }
.card { width: min(400px, 100%); background: #7c3aed; color: #fff; padding: 16px; border-radius: 8px; box-sizing: border-box; }
</style>
</head>
<body>
<div class="card">width: min(400px, 100%) - caps at 400px but shrinks on narrow screens. Resize the frame to see it.</div>
</body>
</html>clamp() - Fluid Sizing Made Easy
clamp(minimum, preferred, maximum) is the star of responsive design. It picks the preferred value but never lets it drop below the minimum or rise above the maximum. Paired with a viewport unit as the preferred value, it creates fluid typography that scales smoothly between two safe limits - no media queries needed.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; }
h1 { font-size: clamp(1.5rem, 5vw, 3rem); color: #0f766e; }
p { font-size: clamp(0.9rem, 2.5vw, 1.2rem); }
</style>
</head>
<body>
<h1>Fluid Heading</h1>
<p>This text scales with the viewport but stays between sensible limits. Resize the frame to watch it grow and shrink.</p>
</body>
</html>clamp(1.5rem, 5vw, 3rem) means: never smaller than 1.5rem, never larger than 3rem, and 5vw in between. It is the cleanest way to get responsive font sizes in a single line.
Nesting and Combining
Math functions can be nested and combined. You can put a calc() inside a clamp(), or use CSS custom properties inside the math, building expressive responsive rules.
:root { --gap: 16px; }
.grid { width: calc(100% - var(--gap) * 2); }
h2 { font-size: clamp(1.25rem, calc(1rem + 2vw), 2.5rem); }Key points
- calc() does arithmetic and can mix units like % and px.
- Always surround + and - with spaces inside calc().
- min() returns the smallest value; max() returns the largest.
- clamp(min, ideal, max) keeps a value between two bounds - ideal for fluid type.
- Math functions can nest and use CSS variables, often replacing media queries.