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