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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up