CSS minmax() Function

Example

#container {
  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
}

One. This column has more text in it.

Two

Three

Four

Five

Meaning

The minmax() css function defines a size range greater than or equal to min and less than or equal to max.

A function taking two parameters, min and max.

Each parameter can be a length, a percentage, a flex value, or one of the keyword values max-content, min-content, or auto.

If max < min, then max is ignored and minmax(min,max) is treated as min. As a maximum, a flex value sets the flex factor of a grid track; it is invalid as a minimum.

Version: CSS3

Standard Syntax

minmax(percentage|flex|max-content|min-content|auto,length)

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

Function Arguments

The following table describes the arguments of this function.

Argument	Description
length	Specifies the value in px, em, in, rem etc... Negative integers not allowed.
percentage	Defines a relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks.
flex	Defines a dimension with the unit fr specifying the track's flex factor.
max-content	Defines the largest max-content contribution of the grid items occupying the grid track.
min-content	Defines the largest min-content contribution of the grid items occupying the grid track.
auto	Specifies the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. It's identical to max-content.