Что такое единица fr в CSS Grid?

Question

Accepted Answer

## Суть на практике

`fr` (**fraction**) — доля **свободного** пространства в грид-контейнере.

## Как считать

После вычета фиксированных треков, `minmax` и отступов оставшееся место делится пропорционально `fr`.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 2fr; /* фикс + 1/3 и 2/3 остатка */
  gap: 16px;
}
```

`1fr 1fr` ≈ две равные колонки из свободного места. Не путать с `%`: проценты от размера контейнера, `fr` — от *свободного* после других треков. `minmax(0, 1fr)` часто нужен, чтобы контент не раздувал трек.

## Итог

`fr` — пропорциональные доли свободного места в Grid. Основа адаптивных колонок без магии calc.