Fractions — or fractional units. FRs. These things are life-changing. Check this out the traditional way:

We have four columns. Each set to 25% width. Making this parent grid a total of, spoiler alert: 100%. Want to change any one of them? You'll need calculus. Except you won't, but it's a pain. Why?

If we make this one 50%, the others maintain their original sizing. And three 25s and a 50 is no longer 100%. It's 125%. Hence the overflow. And we know why this happens: the other three are still taking up 25% of the parent, and the new one hasn't subtracted from that at all.

It gets crazier. What if you're mixing units? There are times where this happens. And following the math can be excruciating. Perhaps more importantly, it holds us back from design.

Enter: CSS fractional units. Or, as Tolstoy called them, FRs. FRs do all the heavy lifting inside anything that’s a grid.

Scalability? Check.,No manual calculations? Check.

And the math is super straightforward. It works like this: same four columns. All even. Each are now 1 FR (one fractional unit). So any **one** of these **four** is 1/4th that width. Want one of them to be twice as wide? Make it 2 FR. Notice how the others resized.

Now it didn't do this randomly. They worked it out because the total is now 5 FRs. Now each of them take 1/5th while our new one takes up 2/5ths. And notice how we can change our gap? No need to recalculate. Everything just works.

But wait. It gets better. Think of the FR here (these fractional units) as two things: a maximum, and a minimum.

The maximum is whatever you set. In FRs. We already know how that works. But what’s the minimum? What happens if we have content in here like a heading? The other columns will shrink proportionally.

So with FRs, the minimum is automatic (or auto). FR automatically sets minimums which will respect the content inside.

Now we can override this minimum. We can set a minimum which gives us control over everything.

With flexbox, this would require scratch paper, a calculator, and a subscription to Netflix, because, as we know, layout troubles are the third-leading cause of procrastination in web development.

But that's the FR unit. FRs let you enter whole numbers, decimals — they're all relative to each other. Set your columns and rows to anything you want. And because this works like a fraction, you can put all sorts of values in here. It all works out, regardless of any gap in your grid.

Fractions that just work. That's the FR unit.

- Fractions — or fractional units. FRs. These things are life-changing. Check this out the traditional way:
- We have four columns. Each set to 25% width. Making this parent grid a total of, spoiler alert: 100%. Want to change any one of them? You'll need calculus. Except you won't, but it's a pain. Why?
- If we make this one 50%, the others maintain their original sizing. And three 25s and a 50 is no longer 100%. It's 125%. Hence the overflow. And we know why this happens: the other three are still taking up 25% of the parent, and the new one hasn't subtracted from that at all.
- It gets crazier. What if you're mixing units? There are times where this happens. And following the math can be excruciating. Perhaps more importantly, it holds us back from design.
- Enter: CSS fractional units. Or, as Tolstoy called them, FRs. FRs do all the heavy lifting inside anything that’s a grid.
- Scalability? Check.,No manual calculations? Check.
- And the math is super straightforward. It works like this: same four columns. All even. Each are now 1 FR (one fractional unit). So any
**one**of these**four**is 1/4th that width. Want one of them to be twice as wide? Make it 2 FR. Notice how the others resized. - Now it didn't do this randomly. They worked it out because the total is now 5 FRs. Now each of them take 1/5th while our new one takes up 2/5ths. And notice how we can change our gap? No need to recalculate. Everything just works.
- But wait. It gets better. Think of the FR here (these fractional units) as two things: a maximum, and a minimum.
- The maximum is whatever you set. In FRs. We already know how that works. But what’s the minimum? What happens if we have content in here like a heading? The other columns will shrink proportionally.
- So with FRs, the minimum is automatic (or auto). FR automatically sets minimums which will respect the content inside.
- Now we can override this minimum. We can set a minimum which gives us control over everything.
- With flexbox, this would require scratch paper, a calculator, and a subscription to Netflix, because, as we know, layout troubles are the third-leading cause of procrastination in web development.
- But that's the FR unit. FRs let you enter whole numbers, decimals — they're all relative to each other. Set your columns and rows to anything you want. And because this works like a fraction, you can put all sorts of values in here. It all works out, regardless of any gap in your grid.
- Fractions that just work. That's the FR unit.

This is some text inside of a div block.

From the beginning of time, CSS layouts have been plagued by complexity. No more. While flexbox is optimized for organizing content along one dimension, grid enables you to quickly build layouts in two dimensions. In this course, we'll cover the basic concepts behind grid as well as some of the new terms unique to the topic.

On this course, you will learn

Designers Who Changed the Web

The Worst Advice We've Ever Heard About Web Design

10 Web Design Blogs You Can't Miss

7 of the Best Examples of Beautiful Blog Design

5 Great Web Design Resources

Authors

You can get more from our Blueprints

How To Choose Teeth Brush

Download NowHow To Choose Teeth Brush

Download Now