Coner Murphy

Published on 15 May 2021 | 4 Minute Read

CSS Explained: CSS Clamp Overview

CSS clamp is a function in CSS that allows us to have greater dynamic control over the values we use in our styles, here's what you need to know about it.

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);
CSS

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! */
css

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);
css

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);
css

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);
css

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



šŸ‘„

Latest Content...

What Iā€™m up to and more.

  • 3 Reasons Why You Need to Design Components and Not Pages

    26 Jun 2021

    3 Reasons Why You Need to Design Components and Not Pages

    If you want to design better websites then you need to stop designing at a page level and start thinkning about components. Here's 3 reasons why.

  • 6 Twitter Analytics Terms You Need to Know to Grow an Audience in 2021

    26 Jun 2021

    6 Twitter Analytics Terms You Need to Know to Grow an Audience in 2021

    Building a Twitter audience is a great way to grow your business. So, here are 6 Twitter analytics terms you need to know and how to measure them.

  • The Complete 2021 Guide to HTTP Status Codes and Their SEO Influence

    1 Jun 2021

    The Complete 2021 Guide to HTTP Status Codes and Their SEO Influence

    HTTP status codes are a vital part of the web, they allow for clear communication between clients and servers as well as influence your SEO score.

Want to read more?

View all posts here