minmax()
A grid track size between a minimum and a maximum.
Syntax
minmax(min, max)Parameters
| Parameter | Type | Description |
|---|---|---|
| min | length | The smallest size. |
| max | length | fr | The largest size; `1fr` means "take the free space". |
Examples
A sidebar that can be neither too narrow nor too wide:
<style>
.grid { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 6px; }
.grid div { padding: 8px; background: peachpuff; }
</style>
<div class="grid"><div>Between 120 and 200px</div><div>The rest</div></div>Notes
Often used together with repeat(auto-fill, …) for responsive card grids. Works only in grid track sizes.
See also
- repeat() — Repeats grid tracks instead of writing them out one by one.
- grid-template-columns — The number and widths of the columns of a grid.
Related recipes
In the tutorial
- Grid — CSS Grid — columns and rows, the fr unit, the repeat and minmax functions, gaps and a responsive grid without media queries.