1
00:00:04,449 --> 00:00:09,006
CSS Grid Layout introduces new features
that adapt content to available space and

2
00:00:09,006 --> 00:00:13,230
intelligently size and
position items within a grid container.

3
00:00:13,230 --> 00:00:16,190
This supports responsive design and
makes it easier

4
00:00:16,190 --> 00:00:20,830
to create layouts that work in
a variety of different browser sizes.

5
00:00:20,830 --> 00:00:25,740
One of the grid length values you'll
use most is the fr or fraction unit.

6
00:00:25,740 --> 00:00:29,770
A flexible length unit designed for
creating grid tracks that expand and

7
00:00:29,770 --> 00:00:32,150
contract based on the free
space in the grid.

8
00:00:33,730 --> 00:00:39,480
In the grid container rule, let's set the
middle column track back to 200 pixels.

9
00:00:39,480 --> 00:00:43,230
And once again, our grid layout
consists of three fixed columns,

10
00:00:43,230 --> 00:00:44,940
each 200 pixels wide.

11
00:00:44,940 --> 00:00:48,060
So now we're seeing all of this extra
white space left over to the right of

12
00:00:48,060 --> 00:00:52,370
the columns, and if I increase
the max width of the grid container

13
00:00:52,370 --> 00:00:55,470
to 1000 pixels, that gap gets wider.

14
00:00:55,470 --> 00:00:58,350
So the grid is not flexible by default.

15
00:00:58,350 --> 00:01:04,170
Well, you learn that the value auto can
expand a column to fill up extra space,

16
00:01:04,170 --> 00:01:07,400
well, auto sizes thing based on content.

17
00:01:07,400 --> 00:01:11,680
So it doesn't give you total control
over how much space an item takes up.

18
00:01:11,680 --> 00:01:15,090
What if you need to set exactly how
much free space an item takes up?

19
00:01:15,090 --> 00:01:19,160
So for instance, assign a small amount
of free space to one column and

20
00:01:19,160 --> 00:01:21,150
a larger amount to another.

21
00:01:21,150 --> 00:01:27,190
CSS Grid can intelligently control the
fluidity or responsiveness of your layout.

22
00:01:27,190 --> 00:01:29,910
So this means you can set items
to automatically wrap and

23
00:01:29,910 --> 00:01:32,380
adjust to fit their container's width.

24
00:01:32,380 --> 00:01:33,530
Which as you'll learn,

25
00:01:33,530 --> 00:01:37,410
makes it possible to create flexible
grid layouts without media queries.

26
00:01:37,410 --> 00:01:41,710
So let's make the grid
flexible using the fr unit.

27
00:01:41,710 --> 00:01:47,911
Now, one fr represents one fraction of
the available space in the grid container.

28
00:01:47,911 --> 00:01:52,962
And if you set any of the column
track values to one fr, for example,

29
00:01:52,962 --> 00:01:57,780
the middle column,
it expands to fill up that extra space.

30
00:01:57,780 --> 00:02:00,550
The middle column is now
flexible while the first and

31
00:02:00,550 --> 00:02:03,750
last columns are fixed at 200 pixels.

32
00:02:03,750 --> 00:02:10,840
And the free space that an fr takes up is
calculated after any non flexible tracks.

33
00:02:10,840 --> 00:02:16,080
So for instance, in this track list,
the total amount of free space available

34
00:02:16,080 --> 00:02:20,740
to 1fr does not include
the space occupied by each of

35
00:02:20,740 --> 00:02:25,880
the 200 pixel column tracks, including
the space assigned to all gutters.

36
00:02:25,880 --> 00:02:30,410
So setting another track size to 1fr

37
00:02:30,410 --> 00:02:35,420
means that the flexible values are divided
between the space that's left over

38
00:02:35,420 --> 00:02:40,180
after the 200 pixels taken by
the third track and the gutter values.

39
00:02:40,180 --> 00:02:43,410
As you can see,
the fr unit removes the need for math.

40
00:02:43,410 --> 00:02:47,700
You can create flexible grids without
having to do any of the percentage

41
00:02:47,700 --> 00:02:51,340
calculations usually required
when creating fluid columns.

42
00:02:51,340 --> 00:02:56,809
For example, if you're creating a fluid
three-column layout with percentages,

43
00:02:56,809 --> 00:03:00,517
you need to make sure that
all columns add up to 100%.

44
00:03:00,517 --> 00:03:07,870
So you'll do the math, and
use values like 33.33% for all columns.

45
00:03:07,870 --> 00:03:11,580
And if you want gutters, you'll also
need to factor in the gutter sizes.

46
00:03:11,580 --> 00:03:15,460
Well, with Grid, making all three
column tracks flexible, and

47
00:03:15,460 --> 00:03:18,610
have each take up a portion
of the free space is simple.

48
00:03:18,610 --> 00:03:23,720
You can do it in a more
declarative way using the fr unit.

49
00:03:23,720 --> 00:03:29,000
So I'll change the track list to one fr,
one fr, one fr, and

50
00:03:29,000 --> 00:03:33,950
just like that,
we have three flexible equal with columns.

51
00:03:33,950 --> 00:03:37,441
Each item is set to one third of
the width of the grid container.

52
00:03:38,940 --> 00:03:43,450
And you can assign more space to
one by giving it a larger fr value.

53
00:03:43,450 --> 00:03:46,650
If you set the middle track to 2fr,

54
00:03:47,980 --> 00:03:53,050
the space is split up by giving one part,
or fraction of the free space,

55
00:03:53,050 --> 00:03:57,940
to the first and third column tracks and
two parts to the middle track.

56
00:03:59,020 --> 00:04:02,770
Also, any space taken up by
gutters will be accounted for

57
00:04:02,770 --> 00:04:06,540
before space is assigned
to the flexible fr tracks.

58
00:04:06,540 --> 00:04:12,154
So for example, if you increase the grid
gap to a larger value, like 40 pixels,

59
00:04:14,949 --> 00:04:20,800
The gutters become wider and the columns
narrower, but they still remain flexible.

60
00:04:20,800 --> 00:04:22,570
Grid does all the calculations for you.

61
00:04:24,330 --> 00:04:26,530
All right, so in the next video,

62
00:04:26,530 --> 00:04:30,020
you'll learn how to write your
track lists in a more compact way.