minmax() function
The minmax() function accepts two parameters, a minimum value, and a maximum value.
Syntax
minmax(min, max)
Note
If the maximum value is less than the minimum, it is ignored and the function is treated as the minimum value. The minmax() function accepts 6 types of values:
- Length
- Percentage
- Flexible length
- Max-content
- Min-content
- Auto
Length
.grid {
display: grid;
grid-template-columns: minmax(100px, 200px) 1fr 1fr;
}
Percentage
.grid {
display: grid;
grid-template-columns: minmax(200px, 50%) 1fr 1fr;
}
Flexible Length
The flexible length uses the fr unit, representing a fraction of the free space in the grid container. Currently, the fr unit can only be used as the maximum value in the minmax() function.
.grid {
display: grid;
grid-template-columns: minmax(200px, 1fr) 1fr 1fr;
}
Explanation
Here, we have 3 columns. The 1st column has a minimum value is 200px and the other two columns have the value of 1fr.
When we resize a viewport, then the value of the 1st column will not be smaller than 200px and the value of the 1st column will be increased when the value of the other 2 columns will increase by 200px.
If the individual value of each column exceeds 200px, then the value of the 3 columns will increase simultaneously.
max-content
The size of the column expands to fit the entire length of the string.
If the contents of the cell are a sentence, the ideal width for the cell will be to take up the entire length of the sentence, regardless of the length, and no line breaks.
.grid {
display: grid;
grid-template-columns: minmax(max-content, max-content) 1fr 1fr;
}
min-content
The size of the column depends on the smallest possible size of the cell or column that does not lead to an overflow.
.grid {
display: grid;
grid-template-columns: minmax(min-content, min-content) 1fr 1fr;
}
auto
Here, the content will be automatically wrapped and the size of the cell or column will be resized according to viewport resizing.
.grid {
display: grid;
grid-template-columns: minmax(auto, auto) 1fr 1fr;
}
Post a Comment