← Back to functions

CSS Function

calc()

Math

Performs arithmetic operations on numeric values, mixing units.

Syntax

calc(expression)

Example

width: calc(100% - 2rem);

Common use cases

  • Responsive spacing that combines percentages and fixed units
  • Dynamic grid gaps
  • Adjusting layout for sidebars or fixed headers

Practical developer insight

Spaces are required around + and - operators in calc() — e.g., calc(100% - 20px). It can mix units like px, rem, vw, and % freely.

Related

min()max()clamp()