# 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.