minmax()
The minmax() function defines a grid track size range with a minimum and maximum bound.
Syntax
minmax(<min>, <max>)Examples
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
Output
Creates responsive columns at least 220px wide that flex up to an equal fraction of remaining space.
Notes
Only valid in grid track sizing. Combined with repeat() and auto-fill or auto-fit it produces fully responsive grids with no media queries. Use min-content or max-content as bounds for intrinsic sizing.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 57 |
| firefox | 52 |
| safari | 10.1 |
| edge | 16 |