CSS: calc

calc

calc() lets you do a simple calculation, for CSS property values.

It can be used anywhere that requires a length or number.

Case-Insensitive

calc and Calc and CALC are the same.

Operator Syntax

you can use any of the following operators

lengthA + lengthB

Add. (🛑 WARNING: must have space before and after the operator.)

width: calc(100% - 80px);

lengthA - lengthB

Subtract. (🛑 WARNING: must have space before and after the operator.)

lengthA * number

Times. One of the argument must be a number.

lengthA / number

Divide. The right-hand side must be a number.

Parentheses can be used for grouping.

Example. Advanced

@media all and (min-width: 801px) {
 .multicol {
  column-count: 2;
 }
}

@media all and (min-width: calc(801px + 1rem * 26 * 2)) {
 .multicol {
  column-count: 3;
 }
}

@media all and (min-width: calc(801px + 1rem * 26 * 3)) {
 .multicol {
  column-count: 4;
 }
}