The CSS Fractional Unit (Fr) In Approachable, plain Language.

Ohans Emmanuel
May 30, 2017 · 3 min read
Image for post
Image for post

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.

Image for post
Image for post
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.

Image for post
Image for post
3 child elements
Image for post
Image for post
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.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!

Image for post
Image for post
Get the Free CSS Grid Cheat sheet + Two Quality Flexbox Courses for free!

Get them now

Flexbox and Grid

Want to master Flexbox or the CSS Grid? Get in Line!

Ohans Emmanuel

Written by

I build complex frontends. I’m passionate about teaching intricate subjects e.g.https://leanpub.com/reintroducing-react. Now writing here: www.ohansemmanuel.com

Flexbox and Grid

Want to master Flexbox or the CSS Grid? Get in Line!

Ohans Emmanuel

Written by

I build complex frontends. I’m passionate about teaching intricate subjects e.g.https://leanpub.com/reintroducing-react. Now writing here: www.ohansemmanuel.com

Flexbox and Grid

Want to master Flexbox or the CSS Grid? Get in Line!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store