Skip to content
Announcing the new Pro Zone. Check it out!

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 keywords auto, min-content, or max-content.
  • Suppose the 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().
  • An fr unit is an invalid unit for the minimum-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

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;
}

Try it on StackBlitz

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

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;
}

Try it on StackBlitz

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%.