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

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>

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

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>

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

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

CSS minmax() Function – How to Define Minimum and Maximum Grid Sizes

Syntax of the CSS minmax() Function​

How to Use the CSS minmax() Function​

Examples of the CSS minmax() function​

How to define a 70px minimum and a 250px maximum row grid size​

How to define a 30% minimum and a 70% maximum column grid size​

Overview​