CSS Min() and Max() Tutorial
Master responsive design with modern CSS comparison functions
What Are CSS Comparison Functions?
CSS comparison functions (min(), max(), and clamp()) allow you to set property values based on comparisons between multiple values. They are incredibly powerful for creating responsive designs that adapt to different screen sizes without media queries.
Key Benefits:
- Create responsive layouts without media queries
- Ensure minimum and maximum sizing constraints
- Fluid typography that scales with viewport size
- More maintainable and flexible than traditional responsive approaches
- Better performance with fewer media query breakpoints
CSS Min, Max, and Clamp Implementation
Complete Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Min, Max, and Clamp Functions</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--accent-color: #e74c3c;
--dark-color: #2c3e50;
--light-color: #ecf0f1;
--text-color: #333;
--text-light: #fff;
--spacing: 1rem;
--border-radius: 8px;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--light-color);
padding: var(--spacing);
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: calc(var(--spacing) * 2);
padding: calc(var(--spacing) * 1.5);
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: var(--text-light);
border-radius: var(--border-radius);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: min(4vw, 2.5rem);
margin-bottom: calc(var(--spacing) / 2);
}
h2 {
font-size: min(3vw, 1.8rem);
margin: calc(var(--spacing) * 1.5) 0 var(--spacing);
color: var(--dark-color);
padding-bottom: calc(var(--spacing) / 2);
border-bottom: 2px solid var(--primary-color);
}
h3 {
font-size: min(2.5vw, 1.3rem);
margin: var(--spacing) 0 calc(var(--spacing) / 2);
color: var(--primary-color);
}
.example {
background: white;
border-radius: var(--border-radius);
padding: var(--spacing);
margin-bottom: calc(var(--spacing) * 1.5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.demo {
border: 2px solid #e9ecef;
border-radius: var(--border-radius);
padding: var(--spacing);
margin: var(--spacing) 0;
background: #f8f9fa;
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing);
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: var(--spacing);
border-radius: var(--border-radius);
overflow-x: auto;
margin: var(--spacing) 0;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 0.9rem;
}
.btn {
display: inline-block;
padding: calc(var(--spacing) / 2) var(--spacing);
background: var(--primary-color);
color: var(--text-light);
border: none;
border-radius: calc(var(--border-radius) / 2);
cursor: pointer;
font-size: 0.9rem;
margin-right: calc(var(--spacing) / 2);
transition: background-color 0.3s;
}
.btn:hover {
background: #2980b9;
}
.btn-copy {
background: var(--secondary-color);
}
.btn-copy:hover {
background: #27ae60;
}
/* Example 1: Basic min() function */
.min-demo {
width: min(100%, 400px);
height: 100px;
background: var(--primary-color);
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--border-radius);
margin: 0 auto;
}
/* Example 2: Basic max() function */
.max-demo {
width: max(50%, 300px);
height: 100px;
background: var(--secondary-color);
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--border-radius);
margin: 0 auto;
}
/* Example 3: Basic clamp() function */
.clamp-demo {
font-size: clamp(1rem, 2.5vw, 2rem);
padding: clamp(0.5rem, 2vw, 1.5rem);
background: var(--accent-color);
color: white;
text-align: center;
border-radius: var(--border-radius);
margin: 0 auto;
width: clamp(200px, 50%, 400px);
}
/* Example 4: Responsive typography with clamp() */
.responsive-text {
font-size: clamp(1.5rem, 4vw, 3rem);
font-weight: bold;
color: var(--dark-color);
text-align: center;
margin: var(--spacing) 0;
}
/* Example 5: Responsive spacing with min() */
.responsive-spacing {
padding: min(5vw, 3rem);
background: var(--primary-color);
color: white;
border-radius: var(--border-radius);
text-align: center;
}
/* Example 6: Aspect ratio with max() */
.aspect-ratio-demo {
width: 100%;
height: max(20vh, 150px);
background: var(--secondary-color);
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--border-radius);
}
/* Example 7: Complex layout with multiple functions */
.complex-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: min(2vw, 1.5rem);
padding: var(--spacing);
}
.grid-item {
background: var(--accent-color);
color: white;
padding: var(--spacing);
border-radius: var(--border-radius);
text-align: center;
height: max(100px, 15vh);
display: flex;
justify-content: center;
align-items: center;
}
/* Example 8: Responsive border with clamp() */
.responsive-border {
padding: var(--spacing);
background: white;
border: clamp(1px, 0.3vw, 4px) solid var(--primary-color);
border-radius: var(--border-radius);
text-align: center;
}
/* Example 9: Dynamic shadow with max() */
.dynamic-shadow {
padding: var(--spacing);
background: white;
border-radius: var(--border-radius);
box-shadow: 0 max(0.5vh, 4px) max(1vh, 8px) rgba(0, 0, 0, 0.1);
text-align: center;
}
/* Example 10: Combined example */
.combined-demo {
width: min(90%, 600px);
height: max(20vh, 150px);
padding: clamp(1rem, 3vw, 2rem);
margin: 0 auto;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border-radius: var(--border-radius);
display: flex;
justify-content: center;
align-items: center;
font-size: clamp(1.2rem, 3vw, 2rem);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>CSS Min(), Max(), and Clamp() Tutorial</h1>
<p>Master responsive design with modern CSS comparison functions</p>
</header>
<section class="example">
<h2>1. min() Function</h2>
<p>Selects the smallest value from a list of comma-separated expressions.</p>
<div class="demo">
<div class="min-demo">width: min(100%, 400px)</div>
</div>
<div class="code-block">
.min-demo {
width: min(100%, 400px); /* Will be at most 400px */
height: 100px;
background: #3498db;
}
</div>
</section>
<section class="example">
<h2>2. max() Function</h2>
<p>Selects the largest value from a list of comma-separated expressions.</p>
<div class="demo">
<div class="max-demo">width: max(50%, 300px)</div>
</div>
<div class="code-block">
.max-demo {
width: max(50%, 300px); /* Will be at least 300px */
height: 100px;
background: #2ecc71;
}
</div>
</section>
<section class="example">
<h2>3. clamp() Function</h2>
<p>Clamps a value between an upper and lower bound.</p>
<div class="demo">
<div class="clamp-demo">
font-size: clamp(1rem, 2.5vw, 2rem)
</div>
</div>
<div class="code-block">
.clamp-demo {
font-size: clamp(1rem, 2.5vw, 2rem); /* Minimum 1rem, preferred 2.5vw, maximum 2rem */
width: clamp(200px, 50%, 400px);
background: #e74c3c;
}
</div>
</section>
<section class="example">
<h2>4. Responsive Typography</h2>
<p>Using clamp() for fluid typography that scales between minimum and maximum values.</p>
<div class="demo">
<div class="responsive-text">
This text responsively scales
</div>
</div>
<div class="code-block">
.responsive-text {
font-size: clamp(1.5rem, 4vw, 3rem);
/* Will never be smaller than 1.5rem or larger than 3rem */
}
</div>
</section>
<section class="example">
<h2>5. Responsive Spacing</h2>
<p>Using min() to create spacing that doesn't exceed a maximum value.</p>
<div class="demo">
<div class="responsive-spacing">
Padding: min(5vw, 3rem)
</div>
</div>
<div class="code-block">
.responsive-spacing {
padding: min(5vw, 3rem);
/* Will be 5% of viewport width, but never more than 3rem */
}
</div>
</section>
<section class="example">
<h2>6. Aspect Ratio Control</h2>
<p>Using max() to ensure an element has a minimum height.</p>
<div class="demo">
<div class="aspect-ratio-demo">
height: max(20vh, 150px)
</div>
</div>
<div class="code-block">
.aspect-ratio-demo {
height: max(20vh, 150px);
/* Will be at least 150px, or 20% of viewport height if larger */
}
</div>
</section>
<section class="example">
<h2>7. Complex Layout</h2>
<p>Combining min() and max() for responsive grid layouts.</p>
<div class="demo">
<div class="complex-layout">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
</div>
<div class="code-block">
.complex-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: min(2vw, 1.5rem);
}
.grid-item {
height: max(100px, 15vh);
}
</div>
</section>
<section class="example">
<h2>8. Responsive Borders</h2>
<p>Using clamp() for borders that scale with viewport but have limits.</p>
<div class="demo">
<div class="responsive-border">
Border: clamp(1px, 0.3vw, 4px)
</div>
</div>
<div class="code-block">
.responsive-border {
border: clamp(1px, 0.3vw, 4px) solid #3498db;
/* Will be 0.3% of viewport width, but between 1px and 4px */
}
</div>
</section>
<section class="example">
<h2>9. Dynamic Shadows</h2>
<p>Using max() to create shadows that adapt to different screen sizes.</p>
<div class="demo">
<div class="dynamic-shadow">
Box-shadow with max() values
</div>
</div>
<div class="code-block">
.dynamic-shadow {
box-shadow: 0 max(0.5vh, 4px) max(1vh, 8px) rgba(0, 0, 0, 0.1);
/* Shadow size adapts to viewport but has minimum values */
}
</div>
</section>
<section class="example">
<h2>10. Combined Example</h2>
<p>Using all three functions together for a fully responsive component.</p>
<div class="demo">
<div class="combined-demo">
Fully responsive with min(), max(), and clamp()
</div>
</div>
<div class="code-block">
.combined-demo {
width: min(90%, 600px);
height: max(20vh, 150px);
padding: clamp(1rem, 3vw, 2rem);
font-size: clamp(1.2rem, 3vw, 2rem);
}
</div>
</section>
</div>
</body>
</html>Key CSS Comparison Functions Concepts
min() Function
- Returns the smallest value from a list
- Useful for setting maximum size limits
- Syntax:
min(value1, value2, ...) - Example:
width: min(100%, 500px) - Ensures element never exceeds 500px width
max() Function
- Returns the largest value from a list
- Useful for setting minimum size guarantees
- Syntax:
max(value1, value2, ...) - Example:
width: max(50%, 300px) - Ensures element is at least 300px wide
clamp() Function
- Clamps a value between a minimum and maximum
- Ideal for fluid typography and responsive spacing
- Syntax:
clamp(min, preferred, max) - Example:
font-size: clamp(1rem, 2.5vw, 2rem) - Creates responsive values that stay within bounds
CSS Comparison Functions Best Practices
Do's
- Use clamp() for fluid typography
- Use min() to prevent elements from becoming too large
- Use max() to ensure minimum sizing on small screens
- Combine with CSS custom properties for more flexibility
- Test across various screen sizes and devices
Don'ts
- Don't overcomplicate with too many nested functions
- Avoid using only viewport units without limits
- Don't forget to provide fallbacks for older browsers
- Avoid using for critical layout that must work in all browsers
- Don't use where simple min/max-width would suffice
Real-World Applications
Where to Use CSS Comparison Functions
- Fluid Typography: Use clamp() for text that scales with viewport but has limits
- Responsive Containers: Use min() and max() to control container widths
- Spacing Systems: Create responsive padding and margins that adapt to screen size
- Grid Layouts: Use minmax() with min() for responsive grid columns
- Aspect Ratios: Maintain minimum dimensions while allowing flexibility
- Responsive Borders/Shadows: Create effects that scale appropriately
Browser Support & Fallbacks
Compatibility Information
CSS comparison functions have excellent support in modern browsers, but it's important to provide fallbacks for older browsers.
- Supported in all modern browsers (Chrome, Firefox, Safari, Edge)
- Not supported in Internet Explorer
- Use
@supportsrule for feature detection - Provide static fallback values before function declarations
- Consider using CSS preprocessors for legacy browser support
Ready to Experiment with CSS Comparison Functions?
Try these CSS min(), max(), and clamp() examples in our interactive editor. Modify the code, see the results in real-time, and practice implementing these functions in your projects.