Коротко: 1fr — это единица измерения во flex/grid, которая означает «одна доля свободного места». Если задать grid-template-columns: 1fr 1fr, сетка получит две равные колонки. fr автоматически «растягивает» колонки на всю доступную ширину и не оставляет пустот.
1fr с 100% или 1px. На самом деле это гибкая доля: она считает оставшееся место после всех фиксированных значений. Именно поэтому fr — главный инструмент адаптивных сеток.Что означает «доля»
Представьте 1200px доступного места и три колонки 1fr 1fr 1fr. Каждая колонка получит 1200 / 3 = 400px. Если поставить 1fr 2fr, первая получит треть, а вторая — две трети: то есть 400px и 800px.
| Значение | Как делит место |
|---|---|
1fr 1fr |
две равные колонки |
2fr 1fr |
первая в 2 раза шире второй |
200px 1fr |
сначала фикс 200px, остаток — второй колонке |
1fr min-content |
вторая по самому узкому содержимому, остаток — первой |
Вкладки: где применяется fr
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}Три равные колонки, растянутые на всю ширину родителя. Пустот справа не остаётся.
.layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 24px;
}Классика: фиксированный сайдбар слева и гибкий контент справа. 1fr занимает всё оставшееся место.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}Самый популярный адаптивный приём: карточки сами переносятся на новую строку, каждая — не уже 240px и растягивается через 1fr.
В flex-раскладке fr не работает — там гибкость задают через flex: 1. Чтобы получить поведение «равных долей», пишите flex: 1 1 0. Во flex единица fr просто не существует.
1fr в single-column отличается от 100%: если вместе с ним есть фиксированные колонки или gap, fr посчитает остаток правильно, а 100% вызовет переполнение. Не смешивайте 100% и fr в одной строке — получите горизонтальный скролл.Практика: три раскладки
- Галерея:
repeat(auto-fit, minmax(200px, 1fr)). - Статья с сайдбаром:
1fr 320px(контент гибкий, сайдбар фикс). - Дашборд 2:1:
2fr 1fr.
Мини-таблица: fr против других единиц
grid-template-columns: 1fr 1fr; /* две равные */
grid-template-columns: 1fr 2fr; /* 1:2 */
grid-template-columns: 200px 1fr; /* фикс + гибкая */
grid-template-columns: minmax(0, 1fr); /* защита от переполнения */minmax(0, 1fr) — важный приём: длинное слово или картинка не «разорвут» колонку, потому что минимум разрешён нулевым.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Колонка вылезает за край | длинное содержимое внутри 1fr |
minmax(0, 1fr) |
| fr «не работает» | используется во flex | использовать grid или flex: 1 |
| Сетка не адаптируется | жёсткие пиксели вместо fr |
заменить на доли |
| Появился скролл вбок | 100% + fr + gap |
убрать 100% |
Проверьте себя
grid-template-columns: 2fr 1fr?
fr?
Вопросы и ответы
Проценты считаются от ширины родителя и не учитывают gap с фикс-колонками. fr сначала вычитает фиксированные размеры и gap, потом делит остаток по долям.
У 1fr минимальный размер по умолчанию — это min-content. Если внутри длинное слово или таблица, колонка распухнет. minmax(0, 1fr) разрешает сжаться до нуля.
Короткая запись трёх колонок 1fr 1fr 1fr. Удобно, когда колонок много.
Задайте ей min-content или фиксированный px, а гибкой оставьте 1fr: например 1fr 220px.
Итоги
1fr— одна доля свободного места после фикс-значений и gap.- Работает только в grid; во flex используйте
flex: 1. - Для безопасных сеток —
repeat(auto-fit, minmax(240px, 1fr)). - Защита от переполнения —
minmax(0, 1fr).
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.