CSS Math Functions

Master CSS mathematical functions like calc(), min(), max(), and clamp() for dynamic, responsive layouts.

CSS math functions enable dynamic calculations for creating flexible, responsive designs without JavaScript.

calc() Function

Perform calculations with different units.

.element {
  width: calc(100% - 50px);
  height: calc(100vh - 80px);
  margin: calc(1rem + 10px);
  padding: calc(2em * 0.5);
}

Common Use Cases

/* Full width minus sidebar */
.main {
  width: calc(100% - 250px);
}

/* Centered with calc */
.centered {
  width: 80%;
  margin-left: calc((100% - 80%) / 2);
}

/* Responsive spacing */
.spacing {
  padding: calc(10px + 1vw);
}

/* Font size */
.fluid-text {
  font-size: calc(16px + 0.5vw);
}

min() Function

Returns the smallest value.

/* Never wider than 800px */
.container {
  width: min(90%, 800px);
}

/* Responsive font */
.text {
  font-size: min(5vw, 24px);
}

/* Multiple values */
.element {
  width: min(100%, 1200px, 90vw);
}

max() Function

Returns the largest value.

/* At least 300px wide */
.sidebar {
  width: max(300px, 25%);
}

/* Minimum font size */
.text {
  font-size: max(16px, 1rem);
}

/* Touch targets */
.button {
  min-height: max(44px, 3em);
}

clamp() Function

Constrains value between min and max.

/* Syntax: clamp(min, preferred, max) */
.fluid {
  font-size: clamp(1rem, 2.5vw, 3rem);
  width: clamp(300px, 50%, 800px);
  padding: clamp(10px, 2vw, 30px);
}

Fluid Typography

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

p {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

Responsive Spacing

.section {
  padding: clamp(20px, 5vw, 80px);
  margin-bottom: clamp(30px, 8vh, 120px);
}

Practical Examples

Responsive Container

.container {
  width: min(90%, 1200px);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 3rem);
}

Flexible Grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

.layout {
  display: flex;
}

.sidebar {
  width: clamp(200px, 25%, 300px);
}

.main {
  flex: 1;
  padding: clamp(1rem, 3vw, 3rem);
}

Aspect Ratio Box

.box {
  width: 100%;
  height: calc(100% * 9 / 16); /* 16:9 ratio */
}

Overlay Position

.overlay {
  top: calc(50% - 200px);
  left: calc(50% - 300px);
}

Combining Functions

/* calc inside clamp */
.element {
  width: clamp(300px, calc(50% - 20px), 800px);
}

/* min/max inside calc */
.element {
  padding: calc(min(2vw, 20px) + 10px);
}

/* Complex calculations */
.grid-item {
  width: calc((100% - min(3rem, 5vw)) / 3);
}

Browser Compatibility

/* Fallback for older browsers */
.element {
  width: 80%; /* Fallback */
  width: clamp(300px, 80%, 1200px); /* Modern */
}

Best Practices

Math Function Best Practices

Use clamp() for fluid typography
Prefer min/max over media queries when possible
Always include units (except for 0)
Use calc() for complex spacing
Test across different screen sizes
Provide fallbacks for older browsers
Keep calculations readable
Use CSS variables for repeated values
Combine with CSS Grid for powerful layouts

Performance

Math functions are computed once (not on every frame)
More performant than JavaScript calculations
No performance impact on modern browsers

Common Patterns

Responsive Padding

.section {
  padding: clamp(2rem, 5vw, 5rem);
}

Fluid Spacing

.stack > * + * {
  margin-top: clamp(1rem, 3vh, 3rem);
}

Container Queries Alternative

.card {
  width: min(100%, 400px);
  padding: clamp(1rem, 5%, 2rem);
}

Master CSS math functions to create truly responsive, flexible designs!

CSS math functions enable dynamic calculations for creating flexible, responsive designs without JavaScript.

calc() Function

Perform calculations with different units.

.element {
  width: calc(100% - 50px);
  height: calc(100vh - 80px);
  margin: calc(1rem + 10px);
  padding: calc(2em * 0.5);
}

Common Use Cases

/* Full width minus sidebar */
.main {
  width: calc(100% - 250px);
}

/* Centered with calc */
.centered {
  width: 80%;
  margin-left: calc((100% - 80%) / 2);
}

/* Responsive spacing */
.spacing {
  padding: calc(10px + 1vw);
}

/* Font size */
.fluid-text {
  font-size: calc(16px + 0.5vw);
}

min() Function

Returns the smallest value.

/* Never wider than 800px */
.container {
  width: min(90%, 800px);
}

/* Responsive font */
.text {
  font-size: min(5vw, 24px);
}

/* Multiple values */
.element {
  width: min(100%, 1200px, 90vw);
}

max() Function

Returns the largest value.

/* At least 300px wide */
.sidebar {
  width: max(300px, 25%);
}

/* Minimum font size */
.text {
  font-size: max(16px, 1rem);
}

/* Touch targets */
.button {
  min-height: max(44px, 3em);
}

clamp() Function

Constrains value between min and max.

/* Syntax: clamp(min, preferred, max) */
.fluid {
  font-size: clamp(1rem, 2.5vw, 3rem);
  width: clamp(300px, 50%, 800px);
  padding: clamp(10px, 2vw, 30px);
}

Fluid Typography

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

p {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

Responsive Spacing

.section {
  padding: clamp(20px, 5vw, 80px);
  margin-bottom: clamp(30px, 8vh, 120px);
}

Practical Examples

Responsive Container

.container {
  width: min(90%, 1200px);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 3rem);
}

Flexible Grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

.layout {
  display: flex;
}

.sidebar {
  width: clamp(200px, 25%, 300px);
}

.main {
  flex: 1;
  padding: clamp(1rem, 3vw, 3rem);
}

Aspect Ratio Box

.box {
  width: 100%;
  height: calc(100% * 9 / 16); /* 16:9 ratio */
}

Overlay Position

.overlay {
  top: calc(50% - 200px);
  left: calc(50% - 300px);
}

Combining Functions

/* calc inside clamp */
.element {
  width: clamp(300px, calc(50% - 20px), 800px);
}

/* min/max inside calc */
.element {
  padding: calc(min(2vw, 20px) + 10px);
}

/* Complex calculations */
.grid-item {
  width: calc((100% - min(3rem, 5vw)) / 3);
}

Browser Compatibility

/* Fallback for older browsers */
.element {
  width: 80%; /* Fallback */
  width: clamp(300px, 80%, 1200px); /* Modern */
}

Best Practices

Math Function Best Practices

Use clamp() for fluid typography
Prefer min/max over media queries when possible
Always include units (except for 0)
Use calc() for complex spacing
Test across different screen sizes
Provide fallbacks for older browsers
Keep calculations readable
Use CSS variables for repeated values
Combine with CSS Grid for powerful layouts

Performance

Math functions are computed once (not on every frame)
More performant than JavaScript calculations
No performance impact on modern browsers

Common Patterns

Responsive Padding

.section {
  padding: clamp(2rem, 5vw, 5rem);
}

Fluid Spacing

.stack > * + * {
  margin-top: clamp(1rem, 3vh, 3rem);
}

Container Queries Alternative

.card {
  width: min(100%, 400px);
  padding: clamp(1rem, 5%, 2rem);
}

Master CSS math functions to create truly responsive, flexible designs!

CSS Math Functions

On this page

CSS Math Functions

On this page