minmax() CSS 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)
- The
minimum-size
argument specifies the smallest size for a specific length. - The
maximum-size
argument specifies the largest size for a specific length.
You can use the minmax()
function as a value for the following CSS properties:
Example: Create a Three-Rows and Three-Columns Grid Container
- 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
.
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.