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:

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

Example: Create a Three-Rows and Three-Columns Grid Container

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.

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.

Tweet this article