What is CSS clamp function?

CSS “clamp” is a function that allows you to limit or restrict a CSS value within a specified range. It can be used to set a minimum and maximum value for a CSS property, ensuring that the value falls within the defined range. The clamp function takes three arguments: a minimum value, preferred value, and maximum value. The preferred value will be used unless it falls outside of the specified range, in which case either the minimum or maximum value will be used instead.

Here are some examples of using the clamp function to set the font size of a text element to a value between the minimum and maximum limits:

font-size: clamp(1rem, 3vw, 3rem); 

CSS clamp can take both static and calculated values:

/* Static values */
width: clamp(200px, 40%,  400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw,  20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);

Find more about clamp here – https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#syntax