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