CSS Academy · Lesson

calc() for Dynamic Calculations

Mix units and perform arithmetic in CSS using the calc() function for dynamic values.

What is calc()?

calc() allows you to perform arithmetic directly in CSS property values. You can mix different units (px, %, rem, vw) in a single calculation.

Supports addition (+), subtraction (-), multiplication (*), and division (/). Spaces around + and - operators are required.

.sidebar {
  width: calc(100% - 240px);
  /* 100% of parent minus 240px sidebar */
}