Determine CSS Grid Sizing with the Fraction Unit (fr)

There are quite a few ways that we can set the width and height of our grid. To name a few, we have pixels (px), percentages, and fractional units (fr).

We'll start by setting our column width with percentages to see how we have really fine-grain control of each column width. We run into a couple of problems though. We have to do all the math ourselves. The more columns you have the more percentages you have to add up to 100. That's not fun. 😂 On top of that, percentages don't include the grid-gap spacing that you set! You'll have to figure that one out yourself.

This is where fr units come into play. The browser takes in the values you explicitly set, (e.g. percentages, pixels) and then splits the remaining space into fractional units (fr) automatically. You'll see how to mix percentages with fr units to make your grid look exactly how you'd like it.

Lesson Challenge

Use your own words (maybe in a blog post? 😉 ) to explain why fr is the best option for grid.