CSS min() Function

The CSS min() function returns the smallest value from a list of comma-separated values. It is commonly used to create responsive layouts by allowing the browser to choose the minimum value among different units or expressions.

• Returns the smallest value from the specified list of values.
• Allows combining different units such as percentages, pixels, and viewport units.
• Helps create flexible and responsive layouts without media queries.

Syntax:

min(value1, value2);
min(value1, min(value2, min(value3, value4)));

Parameter:

• values: A comma-separated list of values from which the smallest value is selected.

Return Value:

• Returns the smallest value from the specified set of comma-separated values.

Examples of CSS min() Function

Below given are a few examples of the above function.

Example 1: The min() function sets the height and width of the box to the smaller value between 200px and 500px, resulting in a size of 200px.

Example 2: The nested min() function selects the smallest value from multiple viewport-based dimensions to determine the box size.