CSS Math Functions

CSS Math Functions provide a way to perform calculations directly within your styles, which can be incredibly useful when creating responsive layouts, ensuring proportional designs, or adjusting sizes dynamically.

Available Math Functions:

calc(): Allows you to perform calculations between different units.
min(): Chooses the smallest value among a set of provided values.
max(): Chooses the largest value among a set of provided values.
clamp(): Allows you to set a value with an upper and lower bound, ensuring a responsive range

1. calc()

The calc() function lets you perform math operations directly in CSS. This is particularly helpful when combining different units like percentages, pixels, ems, and more.

Example:

div { width: calc(100% – 50px); }

In this example, the width of the

is set to the total width of the container minus 50px.

Supported Operations in calc():

Addition (+)
Subtraction (-)
Multiplication (*)
Division (/)

Use Cases:

Creating layouts that adjust based on dynamic container sizes.
Creating padding or margin adjustments based on available space.

2. min()

The min() function returns the smallest value from a given list of expressions. It’s great for making sure that a certain element doesn’t get too large.

Example:

div { width: min(50%, 300px); }

Here, the width of the

will be 50% of its parent container unless that would be more than 300px, in which case it’ll cap at 300px.

3. max()

Conversely, max() returns the largest value from a given list, ensuring an element doesn’t get too small.

Example:

div { width: max(300px, 20%); }

This ensures that the

will be at least 300px wide but can also grow larger if 20% of its parent is more than 300px.

4. clamp()

clamp() combines min(), max(), and a preferred value to create a flexible size that adjusts between a minimum and maximum range.

Example:

div { font-size: clamp(14px, 5vw, 24px); }

In this case, the font size of the

will grow responsively. It’ll be at least 14px, adjust based on the viewport width (5vw), and never exceed 24px.

Use Cases:

Responsive typography that scales smoothly.
Responsive widths and margins that don’t exceed design constraints.

Request more information

CSS Math Functions