— by Eva


In CSS, min(), max(), and clamp() are powerful functions that help create responsive designs by controlling the size of elements. The min() function sets a value to the smallest of two or more defined options, ensuring that an element doesn’t exceed a specified maximum size. Conversely, max() sets a value to the largest of defined options, preventing an element from shrinking below a certain minimum size. The clamp() function combines these two by accepting three parameters: a minimum value, a preferred value, and a maximum value. This allows for fluid resizing while maintaining boundaries, making it ideal for responsive layouts where sizes adapt to different screen sizes.

Session CodePen

See this Pen on CodePen.

Browser Support