Skip to main content

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

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.

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.