Use CSS Grid like a pro
Learn CSS Grid with live examples and images.
Check it outminmax() is a CSS Grid function for defining minimum and maximum grid sizes.
minmax()
Functionminmax()
accepts two arguments. Here is the syntax:
Note the following:
minimum-size
argument specifies the smallest size for a specific length.maximum-size
argument specifies the largest size for a specific length.minmax()
’s arguments can be any of the non-negative CSS lengths, or any one of the keywords auto
, min-content
, or max-content
.maximum-size
argument is less than the minimum-size
. In that case, browsers will ignore the maximum-size
and treat the minmax()
function as min()
.fr
unit is an invalid unit for the minimum-size
argument.minmax()
FunctionYou can use the minmax()
function as a value for the following CSS properties:
minmax()
functionBelow are examples of how the CSS minmax()
function works.
70px
minimum and a 250px
maximum row grid sizeWe used the CSS minmax()
function to set the <section>
’s third row’s height to a minimum of 70px
and a maximum of 250px
.
30%
minimum and a 70%
maximum column grid sizeWe used the CSS minmax()
function to set the <section>
’s second column’s width to a minimum of 30%
and a maximum of 70%
.