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