CSS Math Functions

CSS Math Functions

CSS provides a powerful set of mathematical functions that enable dynamic calculations and responsive values. These functions can be used anywhere a length, frequency, angle, time, percentage, number, or integer is allowed.

Browser Support

CSS Math Functions are well-supported in modern browsers:

• Chrome 79+
• Firefox 75+
• Safari 13.1+
• Edge 79+

Basic Functions

calc()

Perform basic mathematical operations:

.element {
  /* Basic arithmetic */
  width: calc(100% - 2rem);
  margin: calc(1rem + 2px);
  padding: calc(1rem * 1.5);
  
  /* Multiple operations */
  height: calc(100vh - 3rem - 2px);
  
  /* Nested calculations */
  font-size: calc(1rem + calc(1vw * 2));
}

min()

Select the smallest value from a list:

.container {
  /* Responsive width with maximum */
  width: min(1200px, 100%);
  
  /* Font size with minimum */
  font-size: min(24px, 5vw);
  
  /* Multiple values */
  padding: min(20px, 3vh, 3vw);
}

max()

Select the largest value from a list:

.element {
  /* Responsive width with minimum */
  width: max(300px, 50%);
  
  /* Font size with minimum */
  font-size: max(16px, 1.5vw);
  
  /* Multiple values */
  margin: max(1rem, 2vh, 20px);
}

clamp()

Constrain a value between minimum and maximum limits:

.element {
  /* Fluid typography */
  font-size: clamp(1rem, 5vw, 2rem);
  
  /* Responsive width */
  width: clamp(300px, 50%, 800px);
  
  /* Spacing */
  padding: clamp(1rem, 5vh, 3rem);
}

Advanced Usage

Combining Functions

.element {
  /* Complex calculations */
  width: calc(min(1200px, 100%) - 2rem);
  
  /* Responsive padding */
  padding: clamp(
    1rem,
    calc(1rem + 2vw),
    3rem
  );
  
  /* Dynamic grid columns */
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      min(100%, 300px),
      1fr
    )
  );
}

Custom Properties with Math

:root {
  --spacing-unit: 8px;
  --container-width: 1200px;
  --columns: 3;
}

.grid {
  /* Calculate column width */
  --column-width: calc(
    (var(--container-width) - (var(--columns) - 1) * var(--spacing-unit))
    / var(--columns)
  );
  
  gap: var(--spacing-unit);
  grid-template-columns: repeat(var(--columns), var(--column-width));
}

Practical Examples

Fluid Typography

:root {
  /* Base sizes */
  --font-size-min: 16px;
  --font-size-max: 24px;
  --viewport-min: 320px;
  --viewport-max: 1200px;
  
  /* Fluid scaling */
  --font-size-fluid: clamp(
    var(--font-size-min),
    calc(var(--font-size-min) + (var(--font-size-max) - var(--font-size-min)) * ((100vw - var(--viewport-min)) / (var(--viewport-max) - var(--viewport-min)))),
    var(--font-size-max)
  );
}

body {
  font-size: var(--font-size-fluid);
}

h1 { font-size: calc(var(--font-size-fluid) * 2); }
h2 { font-size: calc(var(--font-size-fluid) * 1.5); }
h3 { font-size: calc(var(--font-size-fluid) * 1.25); }

Responsive Layout

.layout {
  /* Responsive container */
  width: min(1200px, calc(100% - 2rem));
  margin-inline: auto;
  
  /* Dynamic grid */
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      min(100%, 300px),
      1fr
    )
  );
  gap: clamp(1rem, 3vw, 2rem);
}

.sidebar {
  /* Flexible sidebar */
  width: clamp(200px, 30%, 300px);
}

.content {
  /* Responsive content */
  max-width: min(100%, 65ch);
  padding: clamp(1rem, 5vw, 3rem);
}

Aspect Ratio Calculations

.video-container {
  /* 16:9 aspect ratio */
  width: 100%;
  padding-bottom: calc(9 / 16 * 100%);
  position: relative;
}

.image-grid {
  /* Square grid items */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 1rem;
  
  img {
    aspect-ratio: 1;
    object-fit: cover;
  }
}

Best Practices

1. Use Appropriate Functions

/* ✓ Good - clear constraints */
.element {
  width: clamp(300px, 50%, 800px);
}

/* ✗ Bad - complex calc */
.element {
  width: calc(max(300px, min(50%, 800px)));
}

2. Maintain Readability

/* ✓ Good - clear structure */
.element {
  margin: calc(
    var(--spacing-base) * 2 +
    var(--spacing-unit)
  );
}

/* ✗ Bad - hard to read */
.element {
  margin: calc(var(--spacing-base)*2+var(--spacing-unit));
}

3. Provide Fallbacks

/* ✓ Good - progressive enhancement */
.element {
  width: 90%;  /* Fallback */
  width: clamp(300px, 90%, 1200px);
}

/* ✗ Bad - no fallback */
.element {
  width: clamp(300px, 90%, 1200px);
}

Common Use Cases

1. Fluid Typography: Responsive text sizing
2. Responsive Layouts: Dynamic widths and spacing
3. Grid Systems: Flexible column calculations
4. Component Sizing: Constrained dimensions
5. Aspect Ratios: Dynamic media containers

Tips and Tricks

1. Unit Conversion

.element {
  /* Convert px to rem */
  --px-value: 16;
  font-size: calc(var(--px-value) / 16 * 1rem);
}

2. Responsive Spacing

.element {
  /* Fluid spacing */
  --fluid-space: clamp(
    1rem,
    calc(1rem + 2vw),
    3rem
  );
  
  padding: var(--fluid-space);
  gap: calc(var(--fluid-space) / 2);
}

3. Dynamic Calculations

.grid {
  /* Calculate columns based on container width */
  --min-column-width: 200px;
  --column-count: max(
    1,
    floor(var(--container-width) / var(--min-column-width))
  );
  
  grid-template-columns: repeat(
    var(--column-count),
    1fr
  );
}

CSS Math Functions provide powerful tools for creating dynamic, responsive layouts and components. They enable complex calculations that adapt to user preferences and viewport sizes, making CSS more powerful and reducing the need for media queries or JavaScript calculations.