«fr» — это одна из единиц измерения, используемых в CSS. Она означает «есдиница укладываемых элементов» (англ. «fraction of free space»), и используется для определения доли свободного пространства внутри контейнера, которую займёт каждый элемент.
«fr» позволяет создавать гибкие и адаптивные макеты веб-страниц с изменяемым размером элементов при изменении размера окна браузера. Если контейнер содержит несколько элементов с определенными значениями fr, то они масштабируются пропорционально друг другу.
Например, если установить fr для двух элементов, одному — 1fr, а второму — 2fr, то второй элемент будет занимать удвоенное пространство первого.
Значение «fr» зависит от размеров контейнера и может меняться в зависимости от того, как изменяется размер окна браузера. При этом, по сравнению с процентным значением, «fr» позволяет упростить и ускорить создание адаптивных макетов.