min() max() and clamp() for Fluid Values
Constrain values between minimums and maximums using min(), max(), and the clamp() shorthand.
Why Comparison Functions?
CSS comparison functions (min(), max(), clamp()) enable responsive sizing that adapts to context without media queries — more elegant and concise than breakpoint-based approaches.
min() — Pick the Smallest
min(a, b, ...) evaluates all arguments and uses the smallest. The "minimum" here is the visual result — meaning the most constrained option.
.container {
width: min(1200px, 100%);
/* 1200px on large screens, 100% on small (never wider than 1200px) */
}All lessons in this course
- calc() for Dynamic Calculations
- min() max() and clamp() for Fluid Values
- repeat() and minmax() in Grid
- color-mix() and relative color syntax