We will explain the minmax() function in CSS grid with examples in this article.We have seen in in some previous articles about CSS grid before. But it is essential to have a good understanding of it.
The minmax() function syntax
Technically as a function it can take two parameters of min and max. According to MDN each parameter can be a
<flex> value, or one of the keyword values
max-contentrepresents the largest max-content contribution of the grid items occupying the grid track. Also
min-content represents the largest min-content contribution of the grid items occupying the grid track.
A grid layout with minmax()
As an example we have a design which we create grid columns with minmax() function inside it:
As it is explained inside the HTML markup the first column can be as wide as its container as it has max-contnet. But at most it can be 300px as specified inside the first minmax() function:
grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
In the other hand the second column has a minimum with of 200px. But its maximum width is 1fraction of the remaining space. Kind of a flexible width.
In addition the third column has a fixed 150px width column which does not change.
Percentage as value
grid-template-columns: minmax(200px, 50%) 1fr 1fr;
Moreover we can use percentage to calculate the width in minmax() function:
Here the first column has a maximum width of 50% of the container and will not get smaller than 200px.
min-content and max-content
As another option we can use min and max content:
grid-template-columns: minmax(min-content, min-content) minmax(auto, auto) minmax(max-content, max-content);
As a result the third column expands to fit the entire length of the string. Since both the minimum and maximum values are set to
max-content, the width of the column remains the same.
Also in the first column the content within the cell is shifted in order to take up the least amount of horizontal space possible, without causing any overflow.
The second column has min and max value as auto. Auto as a maximum, is equivalent to the
max-content value.. Also as a minimum, the
auto value represents the largest minimum size the cell can be. This “largest minimum size” is different from the
min-content value, and specified by
A responsive grid without media queries
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
We use repeat function and auto-fit as its first argument and the minmax() function with a minimum fixed width and fr as max width to make sure the layout can expand according to the viewport width. It will beautifully build a responsive grid layout.
Thank you for reading.