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:
minmax(minimum-size, maximum-size)
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 sizesection { display: grid; grid-template-rows: 50px 100px minmax(70px, 250px); grid-template-columns: auto auto auto; background-color: orange; margin: 10px; padding: 7px;}
div { background-color: purple; color: white; margin: 5px; padding: 10px; border-radius: 5px;}
<section> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div></section>
We 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 sizesection { display: grid; grid-template-rows: auto auto auto; grid-template-columns: 1fr minmax(30%, 70%) 1fr; background-color: orange; margin: 10px; padding: 7px;}
div { background-color: purple; color: white; margin: 5px; padding: 10px; border-radius: 5px;}
<section> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div></section>
We used the CSS minmax()
function to set the <section>
’s second column’s width to a minimum of 30%
and a maximum of 70%
.