CSS clamp() Method
Last Updated :
19 Aug, 2022
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
Syntax :
clamp(value1, value2, value3)
Parameters:
- Here value1 represents the minimum value, value2 represents the preferred value and value3 represents the maximum value.
Example:
html
<!DOCTYPE html>
<html>
<head>
<style>
/* Setting clamp property of heading */
h1 {
font-size: clamp(2rem, 4vw, 4rem);
color: #eb4034;
}
/* Setting clamp property of box */
.box {
width: clamp(150px, 50%, 400px);
height: 8rem;
background: #5f76e8;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome To GFG</h1>
<div class="box"></div>
</div>
</body>
</html>
|
Output:
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.
Supported Browsers:
- Chrome 79 and above
- Opera 66 and above
- Internet Explorer not supported
- Safari 13.1 and above
- Firefox 75 and above
- Edge 79 and above
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...