Minmax function

Learn flexible column/row sizes with minmax().

minmax(): flexible column size

The minmax() function sets both the minimum and maximum size of a column or row in one go. minmax(200px, 1fr) means 'at least 200px, share the rest'.

So when columns shrink, they never drop below 200px; when they grow, they scale proportionally. This is ideal for responsive card grids.

min and max values

minmax() takes two values: the minimum first, the maximum second. Both can be px, %, em or fr; but fr may only appear as the maximum.

minmax(100px, 300px) pins the column between 100-300px; minmax(0, 1fr) lets the column shrink. The second form is used to prevent overflow.

A responsive card grid

On a product list, each card should be at least 200px wide and still fit the screen. repeat(3, minmax(200px, 1fr)) sets three columns; on a narrow screen each column drops to 200px without overflowing.

This form behaves responsively without media queries. Cards rearrange to fit the screen; far more flexible than a fixed pixel layout.

Exercise Build a flexible card grid

Define 3 columns in a .cards grid. Each column is at least 200px and shares leftover space (1fr). Use the repeat() function. Write only the grid-template-columns declaration.

Show example solution

.cards {
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

Test yourself

What does minmax(200px, 1fr) do?
```
.cards {
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}
```
- At least 200px, share the leftover space
- A fixed 200px width
- At most 200px, at least 1fr
- Randomly picks between 200px and 1fr
Show answer

At least 200px, share the leftover space — Correct. The first value is the minimum, the second is the maximum; 1fr shares leftover space.

Complete the flexible column

.cards {
  grid-template-columns: repeat(3, ____);
}

Show answer

.cards {
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

Match each minmax example to its meaning

minmax(200px, 1fr)

At least 200px, shares
minmax(100px, 300px)

Between 100px and 300px
minmax(0, 1fr)

Can shrink, shares
minmax(auto, auto)

Follows content

Next lesson: Summary - Magazine layout

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies