Первым делом я хочу определиться с терминологией в этой статье и последующих. Самый верный перевод fractional unit в контексте Grid разработки и применения fr в ней же, это единица гибкости. Почему? Это вы поймете прочитав статью.

Сама по себе fr это новая форма единицы измерения, в основном ассоциируемая с CSS Grid.

Время чумовых историй

Давайте на чуток притворимся, что мы забыли про CSS Grid единицы гибкости. Ок? Отлично.

И так, представьте что у нас выходные и у нас есть большой, сочный и пористый торт.

fractional единица гибкости

Но затруднение в том, что вам надо разделить его на пять одинаковых кусков! И так, вы берете нож и приступаете к работе. Через пять минут у вас получается самая идеальная нарезка. Пять равных частей!

fractional единица гибкости

Отличная работа!

Но когда вы уже было подумали, что сделали свою работу, приходит ещё один сосед и настаивает на том, чтобы ему тоже дали равную порцию пирога. Реально? Что тогда делать? Собрать все разделенные пироги и волшебным образом связать их снова вместе, чтобы сделать снова равную нарезку?

Я бы не стал этого делать.

Применение

Это проблема с которой мы жили долгое время. Как и большой пористый пирог, у нас есть 100% ширина вдоль любого размера экрана.

Обратите внимание на разметку ниже:

<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section> 

У нас есть контейнер <section> который хранит в себе 5 <div>

Чтобы разделить 100% ширину равномерно и раздать каждому <div>равную ширину, вам нужно указать для каждого индивидуальную ширину в 20%. Почему?

Потому что у нас пять <div>. 100% разделить на 5 получается 20%.

Но когда вы уже было подумали, что сделали свою работу, приходит ещё один сосед и настаивает на том, чтобы ему тоже дали равную порцию пирога.

Если добавится еще один <div>, то вам придется пересчитывать всё и указывать заново ширину! 100% разделить на 6, ну дальше сами считайте.

И именно это та проблема, которую решает fr — единица гибкости.

Единица гибкости

С единицей гибкости (fr) вам не нужно что-то больше пересчитывать — вообще не нужно. На то она и единица гибкости, чтобы быть гибкой.

Если вы указываете ширину в 1fr, то вы можете дальше добавлять столько элементов, сколько возможно и это она об этом позаботиться. Ширина каждого элемента будет равномерно разделена среди дочерних элементов.

fractional единица гибкости
Единица гибкости

Вы не привязаны к целым значениям. Вы можете спокойно указывать такие значения как: 1.5fr 3fr 4.5fr В общем суть тут ясна.

Но давайте углубимся в математику. И разберем все более детально, как что происходит за кулисами расчета каждой единицы гибкости.

В нашем случае, общая доля равна 1.5fr + 3fr + 4.5fr = 9fr

Если родительский контейнер имеет ширину 900px

Первое значение, 1.5fr будет иметь ширину из расчета 1.5fr/9fr * 900px. Что выдает в итоге 150px.

Второе значение, 3fr будет иметь ширину 3fr/9fr * 900px. Что выдаст нам в итоге 300px.

Третье значение, 4.5fr будет иметь ширину 4.5fr/9fr * 900px. Что выдаст в итоге 450px.

С использованием таких единиц гибкости, нам предоставляются большие возможности в разработки гибких макетов. Поймайте момент, насладившись выкладкой контента с помощью CSS Grid разметки.