The CSS clamp() function sets a responsive value that stays between a specified minimum and maximum limit. It is commonly used for flexible sizing in layouts and typography.
- Accepts three values: a minimum, a preferred, and a maximum value.
- Uses the preferred value when it falls within the specified range; otherwise, it uses the minimum or maximum value.
- Helps create responsive designs for properties such as font-size, width, height, and spacing without media queries.
Syntax :
clamp(value1, value2, value3)Parameters:
- value1 represents the minimum value.
- value2 represents the preferred value
- value3 represents the maximum value.
Examples of CSS clamp() Method
Here are some examples discussed:
Example 1: The clamp() function creates a responsive heading and box size by keeping their values between specified minimum and maximum limits.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS clamp() Example</title>
<!--Driver Code Ends-->
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background: #f0f0f0;
}
.container {
text-align: center;
}
h1 {
font-size: clamp(2rem, 4vw, 4rem);
color: #eb4034;
margin-bottom: 20px;
}
.box {
width: clamp(150px, 50%, 400px);
height: 8rem;
background: #5f76e8;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: clamp(1rem, 2vw, 1.5rem);
border-radius: 8px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="container">
<h1>Welcome To GFG</h1>
<div class="box">
Responsive Box
</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
Output:
Example 2: The clamp() function creates a responsive card whose width, padding, and text size automatically adjust within defined minimum and maximum limits.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS clamp() Example - Responsive Card</title>
<!--Driver Code Ends-->
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background: #f7f7f7;
}
.card {
width: clamp(250px, 50%, 600px);
padding: clamp(1rem, 2vw, 2rem);
background: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
.card h2 {
font-size: clamp(1.5rem, 3vw, 2.5rem);
color: #333;
margin-bottom: 10px;
}
.card p {
font-size: clamp(1rem, 2vw, 1.5rem);
color: #666;
margin: 0;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="card">
<h2>Responsive Card</h2>
<p>This card adjusts its size and padding based on the viewport width using the clamp() function.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
Output:
