Dublin Library

The Publishing Project

Using CSS math functions

  • 2 min. read

 

CSS provides four mathematical expression functions: calc(), min(), max(), and clamp(). We'll take look at each one in some detail and we'll also talk about how we can use them in CSS variables.

calc() #

The calc() function supports four arithmetic operations: addition (+), subtraction (-), multiplication (*), and division (/).

This will allow you to dynamically calculate the width and height of a container to create responsive layouts.

In this example, you can set the margins of an element minus a fixed amount:

div {
  width: calc(80vw - 20px);
}

min() #

The min() function is used to set the smallest acceptable value for a rule.

It takes 2 comma-separated values that offer the values the browser will choose from.

In this example, the font-size attribute will be 1vw unless the computer value of 1vw is smaller than 25px (I can only think of this happening on very large screens).

font-size: min(25px,1vw);

max() #

The max() function takes two values, like the min() function, and uses the largest of the two values.

In this example, the font will be at least 25px and never larger than 1vw if the 1vw is larger than 25px.

font-size: max(25px,1vw);

clamp() #

The clamp() function defines an acceptable range of various values for a layout element: minimum, preferred, and maximum.

The function takes three values separated by a comma and the values may be of different types.

  • The first value represents the minimum value. If the preferred value is less than this value, the minimum value will be used
  • The second value represents the preferred value. The value will be used as long as it stays between the minimum and maximum values
  • The third value represents the maximum allowed value. If the preferred value is larger than this value, this value will be used

It is, in essence, the combination of both min() and max() features where the value will never be smaller than the minimum value or larger than the maximum value.

In this example, the font-size attribute will be 4vw + 1rem, as long as the calculated value, based on the base font size of the page and the size of the viewport, is no smaller than 1rem or larger than 4rem.

.example {
  font-size: clamp(
    1rem,
    4vw + 1rem,
    4rem
  );
}

CSS math functions can be used everywhere you can use a CSS length value. This gives us additional flexibility when it comes to dynamically sizing elements.

Edit on Github