Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Math operations
Smallest value
Largest value
Range limit
The calc() function lets you perform calculations with different units. Perfect for dynamic layouts!
/* Mix different units */
width: calc(100% - 50px);
/* Math operations: +, -, *, / */
width: calc(100vw - 2rem);
height: calc(100vh / 3);
/* Complex calculations */
padding: calc(1rem + 2vw);
margin: calc((100% - 1200px) / 2);
/* With variables */
width: calc(var(--sidebar-width) + 20px);+ and - operators:calc(100% - 20px) ✓calc(100%-20px) ✗Full width minus fixed sidebar
width: calc(100% - 250px);Center with margin
margin: calc((100% - 800px) / 2);Responsive padding
padding: calc(1rem + 1vw);Grid gap calculation
gap: calc(20px + 1%);<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>🧮 calc() Function</h1>
<div class="example">
<div class="label">width: calc(100% - 100px)</div>
<div class="box calc1">100% width minus 100px</div>
<div class="code">Perfect for fixed sidebar layouts</div>
</div>
<div class="example">
<div class="label">width: calc(100vw - 120px)</div>
<div class="box calc2">Viewport width minus 120px</div>
<div class="code">Responsive to window size</div>
</div>
<div class="example">
<div class="label">margin-left: calc(50% - 200px)</div>
<div class="box calc3">Centered with calc!</div>
<div class="code">Alternative to margin: 0 auto</div>
</div>
<div class="example">
<div class="label">padding: calc(10px + 2vw)</div>
<div class="box calc4">Dynamic padding!</div>
<div class="code">Grows with viewport width</div>
</div>
<div class="example">
<div class="label">Grid: calc(33.333% - 20px) with 30px gap</div>
<div class="grid">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="code">Equal columns with gap</div>
</div>
</div>
</body>
</html>Loading preview...
Returns the smallest value from a list
width: min(500px, 100%);✓ Never exceeds 500px, but can be smaller
Returns the largest value from a list
width: max(300px, 50%);✓ At least 300px, but can be larger
width: min(100%, 800px);→ Never wider than 800px
width: max(50%, 300px);→ At least 300px wide
font-size: min(5vw, 32px);→ Caps at 32px
padding: max(20px, 2vw);→ Minimum 20px
clamp() combines min and max in one function: clamp(minimum, ideal, maximum)
/* clamp(minimum, ideal, maximum) */
/* Responsive font size */
font-size: clamp(16px, 4vw, 32px);
/* Never smaller than 16px, never larger than 32px */
/* Responsive width */
width: clamp(300px, 50%, 800px);
/* Min 300px, Max 800px, tries for 50% */
/* Fluid spacing */
padding: clamp(1rem, 2vw, 3rem);clamp() is perfect for fluid typography that scales with viewport but stays readable!Fluid Typography
font-size: clamp(1rem, 2.5vw, 2rem);Responsive Container
width: clamp(320px, 90%, 1200px);Flexible Padding
padding: clamp(20px, 5%, 80px);Dynamic Gap
gap: clamp(10px, 2vw, 40px);