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.

yummy!

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!

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.

3 child elements
6 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.

Here’s the link again