Что такое fr в CSS Grid и как он работает?

Question

fr — это единица измерения в CSS Grid, которая обозначает долю свободного пространства. Браузер сначала учитывает фиксированные размеры и auto, а оставшееся место делит между колонками с fr. Значения fr работают как пропорции: 1fr 2fr означает деление в соотношении 1 к 2. Это удобный способ делать резиновые layout’ы.

YeaHub · Accepted Answer

fr делает Grid гибким и предсказуемым.ОпределениеОпределение: fr (fraction unit) — единица CSS Grid, обозначающая часть свободного пространства контейнера.Как браузер считает frСначала вычитает фиксированные размеры (px, %)Учитывает min-content / autoОставшееся пространство делит между frПримерыgrid-template-columns: 1fr 1fr;
Колонки равной шириныgrid-template-columns: 200px 2fr 1fr;
После 200px оставшееся место делится как 2 к 1Почему fr лучше процентовНе зависит от общего размера контейнера напрямуюПроще комбинируется с фиксированными колонкамиЛучше читается как “доля пространства”Выводfr — ключевая единица CSS Grid для построения адаптивных и читаемых layout’ов, где важно делить свободное пространство, а не считать проценты вручную.