๐Ÿ”ต CSS Clamp Overview ๐Ÿ”ต

Thread By @MrConerMurphy

๐Ÿ”ต CSS Clamp Overview ๐Ÿ”ต

The clamp function in CSS is a great way to create responsive and flexible designs efficiently and effectively.

If you haven't heard of the clamp function before, this is the thread for you. ๐Ÿ˜„

Let's get started. ๐Ÿงต ๐Ÿ‘‡ 1/7

var _excluded = ["components"];

function _extends

17/05/2021 18:14

1๏ธโƒฃ What is the Clamp function?

The Clamp function:

๐Ÿ‘‰ Allows for the clamping of a value between an upper and lower bound. ๐Ÿ‘‰ It allows for the selecting of a middle value within a range of values between a minimum and maximum defined by the user.


17/05/2021 18:14

2๏ธโƒฃ Examples

Here are a couple of examples of how we use the clamp function in CSS.

We replace the traditional value of the property with the clamp function which will automatically resolve to the correct value.

Let's look at the parameters taken next. ๐Ÿ‘‡ 3/7

var _excluded = ["components"];

function _extends

17/05/2021 18:14

3๏ธโƒฃ Parameters

The Clamp function takes 3 parameters:

1๏ธโƒฃ Minimum - The lowest the value can be. 2๏ธโƒฃ Preferred - The value that will be used providing its > minimum value and < maximum value. 3๏ธโƒฃ Maximum - The highest the value can be.

Let's see how clamp works. ๐Ÿ‘‡ 4/7

17/05/2021 18:14

4๏ธโƒฃ Under the Hood

Underneath the clamp function, CSS is taking the values we entered and converting them into using the max and min functions.

For example:

clamp(1rem, 2.5vw, 5rem)


max(1rem, min(2.5vw, 5rem))

CSS takes a workaround & makes it easy to use. 5/7

17/05/2021 18:14

5๏ธโƒฃ Read More

โ“ Interested in reading more?

You can check out my public notes on CSS Clamp over at my blog:

Alternatively, you can check out the MDN doc below:


๐Ÿ”— Links in this Tweet:

17/05/2021 18:14

Did you enjoy this thread? If so please consider doing one of the below to show your support:

โค๏ธ Like these tweets ๐Ÿ”„ Retweet the first tweet in this thread so others can see it. ๐Ÿ‘ค Follow me for more content like this. 7/7

17/05/2021 18:14

Email Newsletter

Want to get weekly notifications of my posts and more exclusive content?

Please consider signing up to my email newsletter.