CSS Grid Layout introduces new features that adapt content to available space and

intelligently size and position items within a grid container.

This supports responsive design and makes it easier

to create layouts that work in a variety of different browser sizes.

One of the grid length values you'll use most is the fr or fraction unit.

A flexible length unit designed for creating grid tracks that expand and

contract based on the free space in the grid.

In the grid container rule, let's set the middle column track back to 200 pixels.

And once again, our grid layout consists of three fixed columns,

each 200 pixels wide.

So now we're seeing all of this extra white space left over to the right of

the columns, and if I increase the max width of the grid container

to 1000 pixels, that gap gets wider.

So the grid is not flexible by default.

Well, you learn that the value auto can expand a column to fill up extra space,

well, auto sizes thing based on content.

So it doesn't give you total control over how much space an item takes up.

What if you need to set exactly how much free space an item takes up?

So for instance, assign a small amount of free space to one column and

a larger amount to another.

CSS Grid can intelligently control the fluidity or responsiveness of your layout.

So this means you can set items to automatically wrap and

adjust to fit their container's width.

Which as you'll learn,

makes it possible to create flexible grid layouts without media queries.

So let's make the grid flexible using the fr unit.

Now, one fr represents one fraction of the available space in the grid container.

And if you set any of the column track values to one fr, for example,

the middle column, it expands to fill up that extra space.

The middle column is now flexible while the first and

last columns are fixed at 200 pixels.

And the free space that an fr takes up is calculated after any non flexible tracks.

So for instance, in this track list, the total amount of free space available

to 1fr does not include the space occupied by each of

the 200 pixel column tracks, including the space assigned to all gutters.

So setting another track size to 1fr

means that the flexible values are divided between the space that's left over

after the 200 pixels taken by the third track and the gutter values.

As you can see, the fr unit removes the need for math.

You can create flexible grids without having to do any of the percentage

calculations usually required when creating fluid columns.

For example, if you're creating a fluid three-column layout with percentages,

you need to make sure that all columns add up to 100%.

So you'll do the math, and use values like 33.33% for all columns.

And if you want gutters, you'll also need to factor in the gutter sizes.

Well, with Grid, making all three column tracks flexible, and

have each take up a portion of the free space is simple.

You can do it in a more declarative way using the fr unit.

So I'll change the track list to one fr, one fr, one fr, and

just like that, we have three flexible equal with columns.

Each item is set to one third of the width of the grid container.

And you can assign more space to one by giving it a larger fr value.

If you set the middle track to 2fr,

the space is split up by giving one part, or fraction of the free space,

to the first and third column tracks and two parts to the middle track.

Also, any space taken up by gutters will be accounted for

before space is assigned to the flexible fr tracks.

So for example, if you increase the grid gap to a larger value, like 40 pixels,

The gutters become wider and the columns narrower, but they still remain flexible.

Grid does all the calculations for you.

All right, so in the next video,

you'll learn how to write your track lists in a more compact way.