Единица fr

Столбцы с фиксированной шириной в пикселях не подстраиваются под страницу. В широком окне рядом с сеткой остаётся пустое место, а в узком сетка может не поместиться.

Поэтому у сетки есть своя единица — fr (от английского fraction, «доля»). 1fr — это одна доля свободного места в контейнере сетки. Сначала браузер вычитает ширину столбцов с фиксированным размером, а остаток делит между столбцами в fr в соответствии с их числами.

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

Три столбца по одной доле, так что каждый получает треть ширины. Когда контейнер становится шире или уже, столбцы меняются вместе с ним.

Доли не обязаны быть равными. При значении 2fr 1fr 1fr первый столбец получает две доли, а остальные — по одной, так что первый вдвое шире:

Единицу fr можно сочетать и с другими единицами. 200px 1fr создаёт столбец шириной 200 пикселей и второй, который занимает всё оставшееся место. Это удобно для меню рядом с содержимым.

Когда все столбцы одинаковые, их можно записать короче с помощью функции repeat(). Как и у rgb(), у функции есть имя и значения в круглых скобках. Первое значение repeat() — число столбцов, а второе — их ширина, так что repeat(3, 1fr) означает то же, что и 1fr 1fr 1fr.