The CSS Fractional Unit (Fr) In Approachable, plain Language.
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.
Let’s pretend to forget about CSS Grid or fractional units for a bit.
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!
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.
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…
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:
We have a container
section which houses
To share the
100% width accordingly and give the
divs equal widths, you’d specify an individual width of
Because we have 5
100% divided by
“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.5 + 3 + 4.5 = 9
If the parent container has a width of 900px…
The first, (1.5fr) will have a width of 1.5fr/9 * 900px. This yields 150px.
The second, (3fr) will have a width of 3fr/9 * 900px. This yields 300px.
The third, (3fr) will have a width of 4.5fr/9 * 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.
Call to Action
If you’re still struggling with Flexbox or the CSS Grid layout, my free newsletter will teach you everything you need to know. Plus, I’ll send you a copy of my coming book, Mastering Modern CSS Layouts.