calc(), clamp(), min() and max()
Do real math in CSS and build fluid type and spacing that scales without a single media query.
These four functions turn CSS from a static list of values into something that responds to its context. They're the engine behind modern “intrinsic” design.
calc() — mix units freely
The superpower is mixing units the browser resolves at render time: width: calc(100% - 2rem). Percentages, pixels, rem, and viewport units all in one expression. Always keep spaces around the + and - — without them the parser guesses wrong.
min() and max() — pick a bound
Read them by their behavior, which is the opposite of their name in practice:
width: min(100%, 600px)— “be 600px, but never wider than the container”. A responsive cap.width: max(50%, 300px)— “be 50%, but never smaller than 300px”. A responsive floor.
clamp() — a floor, a preferred value, and a ceiling
clamp(MIN, IDEAL, MAX) is the one you'll reach for constantly. Fluid typography in a single line:
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);The text grows with the viewport but never shrinks below 1rem or blows past 2rem. No breakpoints, no jumps.
Example
When to use it
- A developer uses clamp(1rem, 2.5vw, 1.5rem) for a heading font-size that scales smoothly between mobile and desktop without any media query.
- A developer uses calc(100% - 240px) to size a main content area that sits beside a fixed-width sidebar inside a flex or grid container.
- A designer uses min(90vw, 600px) to cap a modal width at 600px while ensuring it fits inside smaller viewports.
More examples
calc() for sidebar layout
Uses calc() to give the main area the exact remaining width after the fixed-width sidebar without JavaScript.
.layout {
display: flex;
}
.sidebar { width: 240px; }
.main { width: calc(100% - 240px); padding: 24px; }clamp() for fluid typography
Applies clamp() so font sizes scale fluidly with the viewport between hard minimum and maximum values.
h1 {
/* min 1.5rem, preferred 4vw, max 3rem */
font-size: clamp(1.5rem, 4vw, 3rem);
}
body {
font-size: clamp(0.9rem, 1.5vw, 1.125rem);
}min() and max() for responsive sizing
Demonstrates min() capping a modal and max() setting a lower-bound width, both adapting to the available viewport space.
.modal {
/* Never wider than 600px, but fits on small screens */
width: min(90vw, 600px);
}
.section {
/* At least 400px wide */
width: max(400px, 50%);
margin-inline: auto;
}
Discussion