CSS clamp(), min(), and max() Guide

CSS comparison functions enable responsive sizing without media queries. Here's how to use them effectively.

Best Practices#

Use clamp() for:
✓ Typography that scales smoothly
✓ Spacing between breakpoints
✓ Component widths
✓ Padding and margins

Use min() for:
✓ Maximum widths (container max-width)
✓ "No larger than" constraints
✓ Responsive with ceiling

Use max() for:
✓ Minimum widths
✓ "No smaller than" constraints
✓ Ensuring minimum sizes

Tips:
✓ Use rem for font sizes
✓ Use viewport units for preferred values
✓ Set reasonable min/max limits
✓ Test at extreme viewport sizes

Avoid:
✗ Over-complicating values
✗ Using px for everything
✗ Ignoring accessibility (min font size)
✗ Forgetting fallbacks for older browsers

CSS comparison functions (min(), max(), clamp()) enable fluid, responsive designs without media queries. Use min() for maximum constraints, max() for minimum constraints, and clamp() for both. They're perfect for fluid typography, spacing, and container widths. Combine with CSS custom properties for maintainable design systems. Always provide fallbacks for older browsers and ensure minimum sizes meet accessibility requirements.

CSS clamp(), min(), and max() Guide

min() Function#

max() Function#

clamp() Function#

Fluid Typography#

Fluid Spacing#

Container Widths#

Responsive Components#

Aspect Ratio with clamp#

Combining with calc()#

Use Cases#

Browser Support#

Best Practices#

Conclusion#

Share this article

Related articles

CSS Grid Layout Patterns

CSS Flexbox Layout Patterns

CSS Container Queries Guide