One incredibly useful new feature introduced with the CSS Grid Layout Specification is the
minmax() function. This function opens the door to us being able to write much more powerful and succinct CSS by allowing us to set, as a value for a grid track, a function including both a minimum and maximum value.
minmax() Function #
minmax() function accepts two parameters, a minimum value and a maximum value.
If the maximum value defined is actually less than the minimum, it is ignored, and the function is treated as purely presenting a minimum value.
minmax() function accepts 6 types of value:
- Flexible Length
Let’s consider examples of each.
Perhaps the most simple value we can use with the
minmax() function is a basic length. Take, for example, this simple grid, which has three columns and a single row.
minmax() function, we can specify that the yellow grid cell remain between 100px and 200px. As the viewport is resized, the absolute value will change, but always within these two limits.
grid-template-columns: minmax(100px, 200px) 1fr 1fr;
The second and third columns shrink and expand to fill the remaining available space equally, but the first column always remains between 100px and 200px wide.
Besides the basic length units, we can also use percentage units with the
minmax() function. Say, for example, that we want the yellow grid cell to take up a maximum of 50% of the grid, but not get any smaller than 200px.
grid-template-columns: minmax(200px, 50%) 1fr 1fr;
No matter how small we shrink the viewport, the yellow cell never gets smaller than 200px. But, when it has the room to, is grows to a maximum of half the grid width.
Flexible Length #
The Flexible Length is a new unit which, like the
minmax() function, was also introduced with the CSS Grid Layout Specification. This length, which uses the
fr unit, represents a fraction of the free space in the grid container. For example, let’s say we have a 100px-wide grid, with 2 columns. One column has a fixed width of 20px and the other column has a width of 1fr. The second column will effectively have a width of 80px, as it takes up the remaining available space within the grid.
fr unit can only be used as the maximum value in the
minmax() function (although it is noted in the spec that, in the future, it may be applicable to the minimum value as well). Going back to our example, we can specify that we want the yellow grid cell to be a minimum of 200px. If the viewport is resized larger than that, we want the cell to be 1fr, the same size as the other two columns.
grid-template-columns: minmax(200px, 1fr) 1fr 1fr;
Since all columns are 1fr at larger viewport sizes, they share an equal amount of space within the grid.
max-content keyword is a special value that represents the cell’s "ideal size". This is the smallest possible size the cell can be, while still fitting around it’s contents unobtrusively. For example, if the contents of the cell is 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.
Taking our previous example, let’s specify that the yellow grid cell be both a minimum and maximum of
grid-template-columns: minmax(max-content, max-content) 1fr 1fr;
As we can see, the size of the 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.
min-content keyword, like
max-content, is a special value. It represents the smallest possible size the cell can be that does not lead to an overflow, unless that overflow is unavoidable.
To illustrate the difference between
max-content, we can use the same content as in the previous example, but set both values of the
minmax() function to
grid-template-columns: minmax(min-content, min-content) 1fr 1fr;
We can see that the content within the cell is shifted in order to take up the least amount of horizontal space possible, without causing any overflow.
Finally, we have
auto. This has different meanings depending on if it is used as the maximum or minimum value in the
If used as a maximum, the
auto value is equivalent to the
max-content value. If used 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
To illustrate this, here's what happens when the yellow grid cell in our example is set to an
auto minimum and maximum.
grid-template-columns: minmax(auto, auto) 1fr 1fr;
minmax() Function: Responsive Design without Media Queries #
As we have seen, there are several cases where using the
minmax() function is suitable, and we can use it in several ways. But perhaps the most popular and useful case for the
minmax() function it's ability to enable us create responsive designs without the use of any media queries.
Let's take this example grid:
Each column in the grid has a minimum width of 200px. As the viewport is resized, the number of columns changes to fit their ideal width. With CSS Grid and the
minmax() function, this can be created in as little as 2 lines of CSS -
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
minmax() function, there are two other key parts to this:
repeat(): This function allows us to specify the same value for multiple columns in the grid. It accepts two values: the number of times to repeat, and the value to be repeated.
auto-fit: This keyword can be used with the
repeat()function instead a number of times to repeat. This will flexibly change the number of columns that are used based on the width each column can be.
One, in my opinion quite major, limitation of this technique, however, is that it only works when each column is of equal width. We have to use the
repeat() function with the
auto-fit keyword, as this is what allows the number of columns to be flexible. Nonetheless, this can still an extremely useful technique in the right circumstances.