CSS minmax() Function – How to Define Minimum and Maximum Grid Sizes
minmax() is a CSS Grid function for defining minimum and maximum grid sizes.
Syntax of the CSS minmax()
Function
minmax()
accepts two arguments. Here is the syntax:
minmax(minimum-size, maximum-size)
Note the following:
- The
minimum-size
argument specifies the smallest size for a specific length. - The
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 keywordsauto
,min-content
, ormax-content
.- Suppose the
maximum-size
argument is less than theminimum-size
. In that case, browsers will ignore themaximum-size
and treat theminmax()
function asmin()
. - An
fr
unit is an invalid unit for theminimum-size
argument.
How to Use the CSS minmax()
Function
You can use the minmax()
function as a value for the following CSS properties:
Examples of the CSS minmax()
function
Below are examples of how the CSS minmax()
function works.
How to define a 70px
minimum and a 250px
maximum row grid size
- CSS
- HTML
section {
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
.
How to define a 30%
minimum and a 70%
maximum column grid size
- CSS
- HTML
section {
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%
.
tip
Use the CSS repeat()
function to specify grid-template-rows
or grid-template-columns
values with repeated patterns.
Overview
This article discussed what a CSS minmax()
function is. We also used an example to see how it works.