CSS Math Functions

Calculation Functions

calc() performs calculations with mixed units.

min() returns the smallest value from a list.

max() returns the largest value from a list.

clamp() constrains a value between min and max.

Useful for responsive sizing without media queries.

/* calc() - mixed units */
.sidebar {
  width: calc(100% - 300px);
  padding: calc(1rem + 5px);
}

/* min() - responsive width */
.container {
  width: min(90%, 1200px);
}

/* max() - minimum size */
.box {
  width: max(50%, 300px);
}

/* clamp() - fluid typography */
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  /* min: 1.5rem, preferred: 5vw, max: 3rem */
}

/* Dynamic spacing */
.card {
  padding: clamp(1rem, 3vw, 3rem);
}