Что такое fr в CSS Grid и чем он отличается от процентов?

`fr` (fraction) — единица, которая делит свободное место контейнера между колонками или строками пропорционально.

Как работает

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 2fr; /* фиксированная, затем 1 и 2 доли остатка */
  gap: 16px;
}

Если ширина контейнера 1000 px, то после 200 px и отступов остаток делится на три части: первая колонка получает одну, вторая две.

Отличие от процентов

• Проценты считаются от всей ширины контейнера и не учитывают gap, поэтому сумма в 100% с отступами вызывает переполнение.
• fr делит только оставшееся место после фиксированных размеров и отступов.
• У fr по умолчанию минимальный размер равен содержимому (auto), поэтому длинный текст может растянуть колонку. Чтобы запретить это, пишут minmax(0, 1fr).

grid-template-columns: repeat(3, minmax(0, 1fr)); /* три равные колонки без распирания */

Коротко для собеседования

fr делит остаток места, а не всю ширину. Для строго равных колонок используют minmax(0, 1fr).