CSS minmax() Function
Example
Use minmax() to define a size range for the grid columns:
.grid-container {
display: grid;
grid-template-columns:
minmax(min-content, 350px) minmax(150px, 1fr) 120px;
grid-gap: 5px;
height: 150px;
background-color: green;
padding: 10px;
}
Try it Yourself »
Definition and Usage
The CSS minmax() function is used with CSS
grids, and defines a size range greater than or equal to a min value and less
than or equal to a max value.
| Version: | CSS Grid Layout Module Level 2 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| minmax() | 59 | 16 | 52 | 10.1 | 44 |
CSS Syntax
minmax(min, max)
| Value | Description |
|---|---|
| min | Required. The minimum value. Can be a length, a percentage, a flex value (fr), or one of the keywords: auto, max-content or min-content |
| max | Required. The maximum value. Can be a length, a percentage, a flex value (fr), or one of the keywords: auto, max-content or min-content |
Related Pages
CSS reference: CSS min() function.
CSS reference: CSS max() function.
CSS reference: CSS grid-template-columns property.
CSS reference: CSS grid-template-rows property.
CSS reference: CSS grid-auto-columns property.
CSS reference: CSS grid-auto-rows property.
