CSS clamp() Function Explained with Real-World Examples

CSS clamp() Function with Examples

What is clamp() in CSS?

The clamp() function allows you to set a minimum value, preferred value, and maximum value for a CSS property. It is commonly used for responsive font sizes, widths, padding, and margins without using media queries.

Syntax:

clamp(minimum, preferred, maximum)

1. Minimum → Smallest allowed value
2. Preferred → Flexible value (usually vw, %, etc.)
3. Maximum → Largest allowed value

Basic example

Medium Screen

Large Screen

Small Screen

Responsive Card Layout

Large Screen

Small Screen