The CSS Fractional Unit (Fr) In Approachable, plain Language.
Introduction
The fractional units(fr) is a new form of unit measurement in CSS — largely associated with the CSS Grid.
If you are not familiar with the CSS Grid, be sure to check out my introductory article.
Story time
Let’s pretend to forget about CSS Grid or fractional units for a bit.
Good.
So it’s holidays and you have a big, moist and fluffy cake.
But the challenge is, you have to share the cake into 5 equal parts!
So you pick up the knife and get to work…
In 5 minutes, you have the most perfect cut. 5 equal parts!
Good Job!
Just when you thought you had done an amazing job, one more neighbour comes from no where and insists on having a cake too 😡 — an equal portion of cake.
Really?
What do you do?
Do you collect all the shared cakes and magically bind them together for another equal cut?
I ain’t doing that…
Application
This is the problem we have lived with for a long time. Like the big fluffy cake, we have a 100% width across any screen size.
Consider the markup below:
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>We have a container section which houses 5 divs
To share the 100% width accordingly and give the divs equal widths, you’d specify an individual width of 20%
Why?
Because we have 5 divs. 100% divided by 5 gives 20%
“Now one more neighbour comes from no where and insists on having a cake too…”
If one more div is added within the section, you have to recalculate and specify the width again!
100% divided by 6 … the math is left to you😆
This is one problem the fractional unit takes away!
The Fractional unit
With the fractional unit(fr) you don’t need to recalculate — at all.
If you specify a width of 1fr , you can go on to add as many child elements as possible and it will be taken care of. The widths will be equally shared accross all child elements.
You are NOT bound to just “ones” or “whole numbers”. You may have values like: 1.5fr 3fr 4.5fr
In this case, the total fraction is 1.5fr + 3fr + 4.5fr = 9fr
If the parent container has a width of 900px…
The first, (1.5fr) will have a width of 1.5fr/9fr * 900px. This yields 150px.
The second, (3fr) will have a width of 3fr/9fr * 900px. This yields 300px.
The third, (3fr) will have a width of 4.5fr/9fr * 900px. This yields 450px.
With fractional units, a lot of flexibility is introduced. Make sure to enjoy the delight it brings to laying out contents with the CSS Grid layout.
👉 Be sure to check out the follow up article, What You Didn’t know about the CSS Fractional Unit
Want to become Pro?
Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!
