⚈
Deep Tech Point
first stop in your tech adventure

CSS grid: a guide to min(), max() and minmax() sizing functions

July 17, 2021 | CSS

This article will focus on the minmax() function, but we will explain the min() and max() functions through the example of minmax() sizing function. So, when we work with the CSS Grid, we use the minmax() sizing function to define a size range – a minimum and maximum value for what the length is able to be – a size range that is greater than or equal to min and less than or equal to max.

The syntax of the minmax() function

The minmax() function accepts two parameters, a minimum value and a maximum value:

minmax(min, max)

The properties to use the minmax() function

The values to be used with the minmax() function

The minmax() function accepts the following types of value:

How the length value works with the minmax() function

This is our code – a grid with 4 columns and one row: 

.my-grid {
    display: grid;
    grid-template-columns: minmax(100px, 300px) 1fr 1fr 1fr;

We use the minmax() function for the first grid cell – the size will range between 100px and 300px, and even when we resize the user’s visible area of a web page, the second, third and fourth will either shrink and expand to fill the space that is available after the first column takes between 100px and 300px width.

How the percentage value works with the minmax() function

.my-grid {
    display: grid;
    grid-template-columns: minmax(100px, 50%) 1fr 1fr 1fr;
}

In the code above we defined that the first cell is cannot get any smaller than 100px, but when the viewport allows it can take up to 50% of the grid. The remaining three cells in the grid will equally take the available space that is left after the first cell is defined. So, basically, what the minmax(100px, 50%) definition of the first cell says is – the first cell is always at least 100px wide, it does not get smaller than that. However, when the user’s visible area of a web page is wide enough, that first cell will take not more than 50% (half of the width) of the screen, the remaining space will split between three remaining 3 columns.

How the fraction unit works with the minmax() function

The fraction unit or fr was first introduced with the CSS grid layout. As already explained earlier in the text, the fr unit is a flexible unit and only takes a free space fragment in the grid container. Note, however, that at the moment in the minmax() function the fr unit can only be applied as the max value, as in our code below: 

.my-grid {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) 1fr 1fr 1fr;
}

So, the code says our cell that is defined with the minmax() function should be minimum 100px and maximum 1fr width. However, if the user’s visible area of a web page is wide enough, our cell will be 1fr, which is, as you can see in the code, the same size as the other three columns.

How the minmax() function works with the max-content and min-content keyword?

We already wrote about sizing keywords and here’s a nice guide to sizing keywords, such as span, min-content, max-content, auto, fit-content, auto-fit, auto-fill in a CSS grid layout, but let’s have a look at how the minmax() function works with the min-content and max-content keywords.

The min-content keyword is a special value – it’s a sizing keyword and stands for the smallest possible width the grid cell can occupy the grid track. If, for example, the content of that cell is a sentence, the min-content will cause the width of the cell to be the longest word of the sentence. As with the previous values, let’s take a look at an example: 

.my-grid {
    display: grid;
    grid-template-columns: minmax(min-content, min-content) 1fr 1fr 1fr;
}

We defined in the minmax() function that the cell should take the minimum amount of horizontal space possible. The remaining three columns take 1fr of available space and these are the columns that will be flexible in width, according to the space that is left after the column with the min-content is defined and of course according to the user’s viewport.

The max-content sizing keyword on the other hand represents the largest contribution of the grid items occupying the grid track. In other words, this is the smallest possible size the grid cell can be, while the content in it still fits in. If, for example, the content of that cell is a sentence, the max-content will cause the width of the cell to take the entire length of the sentence without line breaks.

In the example below, we defined in the minmax() function that the cell should take the maximum amount of horizontal space possible, like so:

.my-grid {
    display: grid;
    grid-template-columns: minmax(max-content, max-content) 1fr 1fr 1fr;
}

In the case above we defined both the minimum and maximum values to max-content, so the width of the column stays the same or even gets smaller if the viewport is not wide enough to display the entire length of the sentence. If, on the other hand, the viewport is wide enough, the remaining 3 columns defined with fr unit will squeeze in, too.

How does auto keyword behaves in the minmax() function?

OK, so let’s set both values in the minmax() function to auto and see what auto in this case really means: 

.my-grid {
    display: grid;
    grid-template-columns: minmax(auto, auto) 1fr 1fr 1fr;
}

First, you should know that auto as a value has different meanings in the minmax() function if it’s used as the minimum or maximum value. When auto is applied for a minimum value, the value represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. Btw, don’t equal this to the min-content value. If, on the other hand, auto is applied for a maximum value, that value is the same as max-content value.

What message should we take home with the minmax() function?

The most useful example for the use of the minmax() function is creating responsive designs without media queries. This is not always the case, because this technique only works when each column is of equal width. So, we have to use the repeat() function with the auto-fit keyword to have flexible columns that are of equal width. Nevertheless, when the conditions allow, the minmax() function is very useful.