The clamp() method is used to clamp the value between an upper and lower bound. It takes three parameters which are listed below:
- Minimum value
- Preferred value
- Maximum value
The minimum value comes in handy when the preferred value is smaller than the minimum value similarly maximum value comes in handy when the preferred value is more than the maximum value. The preferred value becomes useful when it is between the minimum and maximum value.
The clamp() function can be used with the various elements such as font-size, width etc. Lets built a simple layout to get a clear understanding of the clamp() function
clamp(value1, value2, value3)
- Here value1 represents the minimum value, value2 represents the preferred value and value3 represents the maximum value.
In the above-shown example, we see how easily the width and font-size are adjusted according to viewport with the help of the clamp function. The clamp() function is very useful for typography and for creating fluid layout.