— 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.