Що означає одиниця fr?

fr (fraction) - це частка вільного простору в CSS Grid. Вона не дорівнює пікселям чи відсоткам: це одиниця, яка ділить місце, що залишилося в контейнері між колонками або рядками.

Приклад:

Тут сітка ділить вільний простір на 4 частки:

• перша колонка: 1/4
• друга: 2/4
• третя: 1/4

Важливо: fr враховує лише те, що залишилося, після вирахування фіксованих розмірів (px, %, auto, min-content та ін.).

Підсумок: fr - це гнучка пропорційна одиниця для розподілу вільного місця в Grid.