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:

• grid-template-columns
• grid-template-rows
• grid-auto-columns
• grid-auto-rows

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

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

HTML

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

CodeSweetly ads

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

CSS

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

HTML

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

Tip

Use the CSS repeat() function to specify grid-template-rows or grid-template-columns values with repeated patterns.