CSS minmax() Function

❮ Previous Functions Next ❯


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

One. This column has more text in it.


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


Browser Support

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


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.

See also

The minmax() function can be used within:

❮ Previous Functions Next ❯