CSS calc()
calc() performs arithmetic with mixed units in CSS property values. This is especially useful for responsive calculations.
Common use cases: subtracting a fixed header height, splitting remaining space, or combining rem and px.
HTML
Intermediate
4 min read
The CSS calc() Function
Example
.sidebar { width: 250px; }
.main {
width: calc(100% - 250px); /* Fill remaining space */
}
.hero {
height: calc(100vh - 60px); /* Full viewport minus nav */
}
.grid-item {
width: calc(33.333% - 1rem); /* 3 columns with gaps */
} Pro Tip
Spaces around operators in calc() are required: calc(100% - 2rem) works; calc(100%-2rem) does not.