The fr Unit

Columns with a fixed width in pixels don't adapt to the page. In a wide window, there's empty space next to the grid, and in a narrow one, the grid might not fit.

That's why the grid has its own unit, fr (from fraction). 1fr is one share of the free space in the grid container. The browser first takes away the width of the columns with a fixed size, and then divides the rest among the fr columns according to their numbers.

grid-template-columns: 1fr 1fr 1fr;

Three columns with one share each, so each of them gets a third of the width. When the container gets wider or narrower, the columns change with it.

The shares don't have to be equal. With 2fr 1fr 1fr, the first column gets two shares and the other two get one each, so the first one is twice as wide:

The fr unit can also be combined with other units. 200px 1fr creates a column 200 pixels wide and a second one that takes all the remaining space. That's handy for a menu next to the content.

When all the columns are the same, we can write them more briefly with the repeat() function. Like rgb(), a function has a name and values in parentheses. The first value of repeat() is the number of columns and the second one is their width, so repeat(3, 1fr) means the same as 1fr 1fr 1fr.