Единица fr: дробные доли

fr (fraction) — единица CSS Grid, которая представляет долю свободного пространства в грид-контейнере после вычитания фиксированных треков и gap.

Зачем нужно

До fr для равных колонок использовали % с учётом gap вручную: calc(33.33% - 10px). fr автоматически распределяет свободное место — нет нужды в формулах. Это делает Grid-раскладки гибкими и устойчивыми к изменениям gap.

Где используется

  • Равные колонки: repeat(3, 1fr)
  • Пропорциональные колонки: 1fr 2fr (одна вдвое шире)
  • Основной контент + боковая панель: 1fr 300px
  • Адаптивные сетки с minmax(min, 1fr)

Как работает fr

1fr = (свободное пространство контейнера) / (сумма всех fr-значений)

.grid {
  display: grid;
  width: 900px;
  gap: 20px;
  grid-template-columns: 1fr 2fr 1fr;
  /* Свободное место: 900 - 2*20 = 860px */
  /* Сумма fr: 1+2+1 = 4 */
  /* 1fr = 860/4 = 215px */
  /* 2fr = 430px */
}

Примеры

Три равные колонки

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* или сокращённо: repeat(3, 1fr) */
  gap: 16px;
}

Основной контент + боковая панель

.layout {
  display: grid;
  grid-template-columns: 1fr 300px; /* контент + фиксированный sidebar */
  gap: 24px;
}

<div class="layout">
  <main>Основной контент</main>
  <aside>Сайдбар 300px</aside>
</div>

Смешанные единицы

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  /* 200px фиксировано, оставшееся: 1/3 и 2/3 */
}

fr в строках

.page {
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr auto;
  /* Header: auto, Main: занимает всё, Footer: auto */
}

fr vs %

fr %
Учитывает gap Да, автоматически Нет, нужно calc
Расчёт От свободного места От ширины контейнера
С фиксированными треками Работает корректно Сложно

Частые ошибки

  1. fr как минимум в minmax — minmax(1fr, 2fr) невалидно; fr только как второй аргумент.
  2. 0fr не то же что 0 — 0fr создаёт трек нулевого размера; используйте 0 напрямую.
  3. fr без display: grid — единица работает только в контексте Grid.

Связанные темы

Ресурсы