CSS Explained: CSS Clamp Overview

Hey everyone, welcome back to my blog.

This post isn't a typical blog post per se but rather it's a copy of my notes that I made on the CSS Clamp function. I hope you find them helpful, if you have any questions at all please feel free to reach out to me and I'd be happy to help.

What is Clamp?

The `clamp()` function allows for the clamping of a value between a upper and lower bound. It allows for the selecting of a middle value within a range of values between a minimum and maximum.

Parameters

Clamp takes 3 parameters:

1. Min - This is the minimum value we want the property to be set to.
2. Preferred - This is the preferred value, we want to use.
3. Max - This is the maximum value we want the property to use.

Under the hood

When we use clamp, for example: `clamp(1rem, 2.5vw, 5rem)` it gets resolved as `max(1rem, min(2.5vw, 5rem))`. Essentially, the clamp function combines this previous work around of using max and min together into a single function.

Examples

Below are some examples of using `clamp()`:

1font-size: clamp(1rem, 2.5vw, 2rem);
2
3width: clamp(300px, 70vw, 1400px);

Replacing Max Width

You can use `clamp()` to replace setting both a `max-width` and `width` property on an element. For example:

1/* This code, will be 60% of the viewport width unless it exceeds 800px */
2max-width: 800px;
3width: 60vw;
4
5/* We could shorten this to. */
6width: clamp(300px, 60vw, 800px);
7
8/* By using this second method we get to define the preferred width (60vw) but also get to define a min and max width. All in one line! */

Fluid Typography

By using `clamp()` with `font-size` we can set a font size that grows with the size of the viewport but that is constrained between a minimum and maximum value.

Essentially, this has the same effect as the code shown in this CSS-Tricks Article on Fluid Typography. but in one line and without media queries.

Syntax

As described previously, to use the `clamp()` function you need to provide three comma separated values, in the order of minimum value, preferred value and maximum value.

Minimum Value

The minimum value is the smallest value provided. It is the lower bound in the range of values allowed and is used when the preferred value is less than this number.

For example:

1width: clamp(300px, 10vw, 400px);

In this example, if `10vw` calculated to `200px` then the minimum value of `300px` would be used instead.

Preferred Value

The preferred value is the value that will be used provided that it is larger than the minimum value and smaller than the maximum value.

Carrying on our example from before:

1width: clamp(300px, 10vw, 400px);

If `10vw` calculated to `350px` then this is the value that would be used as it fits in the range defined by the minimum and maximum values.

Maximum Value

The maximum value is the largest possible value the property will be given. This value is used when the preferred value exceeds the value defined for it.

To complete our example:

1width: clamp(300px, 10vw, 400px);

If `10vw` calculated to `450px` then the maximum value of `400px` would be used as the preferred value exceeds the maximum value given.

Using Math Functions and Other Expressions

All of the values shown above can be hard-coded values like `px`, `%` or `vw/vh` but, they can also be math functions like `calc()` or other expressions such as `attr()` that evaluate to a valid argument type. For example, length.. Finally, you can also use nested `min()` and `max()` functions.

As the value accepts math functions, you don't have to use other functions like `calc()`, you can just use addition, subtraction, multiplication and division on their own. You can also use parentheses to establish a computation order if required.

Finally, the values you use, as seen above don't need to be of the same type. For example, you can have a `min` and `max` in `px` but the preferred value in `vw`. In fact, you could argue this is one of the primary use cases.

Notable Points

• If using operators when calculating a value, such as `(+, -, / and *)`, then you need to make sure to wrap each operator in a space on both sides.

Sources / Further Reading

• MDN Docs