CSS minmax() function
Example
Set the minimum and maximum dimensions for an element:
#container {
display: grid;
grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8CC6FF;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
Try it Yourself »
Definition and usage
The minmax() function defines a closed interval of length and width range, which with CSSGrid layoutUsed together.
Supported version: CSS3
Browser Support
The numbers in the table represent the first browser version number that supports this function.
| Function | |||||
|---|---|---|---|---|---|
| var() | 57.0 | 16.0 | 76.0 | 10.1 | 44.0 |
CSS Syntax
/* <inflexible-breadth>, <track-breadth> values */ minmax(200px, 1fr) minmax(400px, 50%) minmax(30%, 300px) minmax(100px, max-content) minmax(min-content, 400px) minmax(max-content, auto) minmax(auto, 300px) minmax(min-content, auto) /* <fixed-breadth>, <track-breadth> values */ minmax(200px, 1fr) minmax(30%, 300px) minmax(400px, 50%) minmax(50%, min-content) minmax(300px, max-content) minmax(200px, auto) /* <inflexible-breadth>, <fixed-breadth> values */ minmax(400px, 50%) minmax(30%, 300px) minmax(min-content, 200px) minmax(max-content, 200px) minmax(auto, 300px)
| Value | Description |
|---|---|
| length | Non-negative length. |
| percentage | A non-negative percentage relative to the inline size of the grid container in column grid tracks and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then percentage must be treated as auto. The user agent (user-agent) may adjust the intrinsic size contribution of the track to the size of the grid container, increasing the final size of the track to the minimum amount necessary to honor the percentage. |
| flex | A non-negative size with the fr unit specifies the flex factor of the track. Any track sized with flex will distribute the remaining space proportionally according to its flex factor. |
| max-content | Indicates that the grid track length adapts to the cell with the largest content. |
| min-content | Indicates that the grid track length adapts to the cell with the smallest content. |
| auto | As a maximum, it is equivalent to max-content. As a minimum, it represents the maximum of the minimum sizes of the grid items occupying the grid track (as specified by min-width/min-height). |
other extensions