Use minmax() when a Grid track must remain usable at small widths while still participating in a fluid layout. Its form, minmax(min, max), sets a lower and upper bound: the resolved track is at least min and at most max. If max is smaller than min, the browser ignores max and uses min. section 4.4.1
The function is especially useful with a flexible maximum such as 1fr. Grid first works out how available space is divided among flexible tracks, then enforces the minimum. A flexible value such as fr is valid as the maximum argument, but not as the minimum argument. section 4.4.1 section 4.3
Protect a narrow column
In grid-template-columns: 3fr minmax(250px, 1fr), the second column receives one share of available space but cannot become narrower than 250px. At a 1200px container width, four total fractions make 1fr equal 300px, so the columns resolve to 900px and 300px. At 800px, 1fr would be 200px; the second column instead stays at 250px, leaving 550px for the first column. section 4.4.1
Listing 4.5 minmax() example
.container {
display: grid;
grid-template-columns: 3fr minmax(250px, 1fr);
width: 1200px;
}
Inspect the same two-column declaration used to calculate how the 250px minimum changes the flexible split. section 4.4.1
This behavior makes minmax() a practical constraint rather than a fixed width. A product-card grid can give every card a 250px minimum for readability while allowing each track to grow into available space: grid-template-columns: repeat(4, minmax(250px, 1fr)). section 4.4.1 section 4.6
When reading a minmax() declaration, separate the two jobs:
- Treat the first argument as the boundary Grid must preserve when flexible space would make a track too small. section 4.4.1
- Treat the second argument as the track’s growth limit; with 1fr, it can receive a proportional share of remaining space. section 4.4.1 section 4.6
- Recalculate after container-size changes, because the value of an fr share changes with available width. section 4.1.3
minmax() also appears in responsive gallery layouts such as repeat(auto-fit, minmax(180px, 1fr)), where tracks retain a minimum width and expand when room is available. It differs from auto: auto is essentially comparable to minmax(min-content, max-content), but additionally respects min-width and max-width constraints. section 4.5 section 4.4.2
The practical takeaway is simple: use minmax() to state the size range a track may occupy, then let Grid solve the remaining space distribution. This replaces trial-and-error sizing with an explicit rule for how tracks grow and shrink. section 4.1 section 4.6
