Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Grid layout introduces a new length unit, fr (or fraction), a flexible unit designed for creating grid tracks that expand and contract based on the free space in the grid.
CSS Grid Layout introduces new features
that adapt content to available space and
0:04
intelligently size and
position items within a grid container.
0:09
This supports responsive design and
makes it easier
0:13
to create layouts that work in
a variety of different browser sizes.
0:16
One of the grid length values you'll
use most is the fr or fraction unit.
0:20
A flexible length unit designed for
creating grid tracks that expand and
0:25
contract based on the free
space in the grid.
0:29
In the grid container rule, let's set the
middle column track back to 200 pixels.
0:33
And once again, our grid layout
consists of three fixed columns,
0:39
each 200 pixels wide.
0:43
So now we're seeing all of this extra
white space left over to the right of
0:44
the columns, and if I increase
the max width of the grid container
0:48
to 1000 pixels, that gap gets wider.
0:52
So the grid is not flexible by default.
0:55
Well, you learn that the value auto can
expand a column to fill up extra space,
0:58
well, auto sizes thing based on content.
1:04
So it doesn't give you total control
over how much space an item takes up.
1:07
What if you need to set exactly how
much free space an item takes up?
1:11
So for instance, assign a small amount
of free space to one column and
1:15
a larger amount to another.
1:19
CSS Grid can intelligently control the
fluidity or responsiveness of your layout.
1:21
So this means you can set items
to automatically wrap and
1:27
adjust to fit their container's width.
1:29
Which as you'll learn,
1:32
makes it possible to create flexible
grid layouts without media queries.
1:33
So let's make the grid
flexible using the fr unit.
1:37
Now, one fr represents one fraction of
the available space in the grid container.
1:41
And if you set any of the column
track values to one fr, for example,
1:47
the middle column,
it expands to fill up that extra space.
1:52
The middle column is now
flexible while the first and
1:57
last columns are fixed at 200 pixels.
2:00
And the free space that an fr takes up is
calculated after any non flexible tracks.
2:03
So for instance, in this track list,
the total amount of free space available
2:10
to 1fr does not include
the space occupied by each of
2:16
the 200 pixel column tracks, including
the space assigned to all gutters.
2:20
So setting another track size to 1fr
2:25
means that the flexible values are divided
between the space that's left over
2:30
after the 200 pixels taken by
the third track and the gutter values.
2:35
As you can see,
the fr unit removes the need for math.
2:40
You can create flexible grids without
having to do any of the percentage
2:43
calculations usually required
when creating fluid columns.
2:47
For example, if you're creating a fluid
three-column layout with percentages,
2:51
you need to make sure that
all columns add up to 100%.
2:56
So you'll do the math, and
use values like 33.33% for all columns.
3:00
And if you want gutters, you'll also
need to factor in the gutter sizes.
3:07
Well, with Grid, making all three
column tracks flexible, and
3:11
have each take up a portion
of the free space is simple.
3:15
You can do it in a more
declarative way using the fr unit.
3:18
So I'll change the track list to one fr,
one fr, one fr, and
3:23
just like that,
we have three flexible equal with columns.
3:29
Each item is set to one third of
the width of the grid container.
3:33
And you can assign more space to
one by giving it a larger fr value.
3:38
If you set the middle track to 2fr,
3:43
the space is split up by giving one part,
or fraction of the free space,
3:47
to the first and third column tracks and
two parts to the middle track.
3:53
Also, any space taken up by
gutters will be accounted for
3:59
before space is assigned
to the flexible fr tracks.
4:02
So for example, if you increase the grid
gap to a larger value, like 40 pixels,
4:06
The gutters become wider and the columns
narrower, but they still remain flexible.
4:14
Grid does all the calculations for you.
4:20
All right, so in the next video,
4:24
you'll learn how to write your
track lists in a more compact way.
4:26
You need to sign up for Treehouse in order to download course files.
Sign up