1
00:00:00,750 --> 00:00:04,038
Knowing why, and
how implicit grid tracks are created,

2
00:00:04,038 --> 00:00:06,652
is important when working
with grid layout.

3
00:00:06,652 --> 00:00:08,766
As I mentioned in the previous video,

4
00:00:08,766 --> 00:00:11,811
you are not always going to
place every item manually.

5
00:00:11,811 --> 00:00:13,589
And depending on the site you're building,

6
00:00:13,589 --> 00:00:17,130
you might not always know exactly how many
items will be in your grid container.

7
00:00:17,130 --> 00:00:20,360
So grid layout generates
implicit grid tracks

8
00:00:20,360 --> 00:00:24,130
to position any items
outside of the explicit grid.

9
00:00:24,130 --> 00:00:28,960
But what if you need to size or
position implicit tracks a certain way?

10
00:00:28,960 --> 00:00:32,980
That could get tricky, because there
could be any number of implicit tracks.

11
00:00:32,980 --> 00:00:37,180
In our layout, there are just 2
explicit row tracks that declared,

12
00:00:37,180 --> 00:00:39,800
100 pixels and 200 pixels.

13
00:00:39,800 --> 00:00:43,140
And the grid container has 10 grid items.

14
00:00:43,140 --> 00:00:48,200
The extra four items here are placed
into implicit row tracks,

15
00:00:48,200 --> 00:00:51,320
and they're only as tall
as the content inside them.

16
00:00:51,320 --> 00:00:57,080
But I want all the extra rows to be a
specific size, let's say 250 pixels tall.

17
00:00:57,080 --> 00:01:01,520
Well, I wanna avoid having
to specify 250 pixels for

18
00:01:01,520 --> 00:01:05,680
each extra track here
in grid-template-rows.

19
00:01:05,680 --> 00:01:09,190
Even with repeat notation, because
the number could keep changing, right?

20
00:01:09,190 --> 00:01:12,490
Well, CSS Grid provides a simple and

21
00:01:12,490 --> 00:01:16,120
automated way to control the size and
position of implicit tracks.

22
00:01:16,120 --> 00:01:20,760
That way I can make any number of
implicit tracks 250 pixels tall

23
00:01:20,760 --> 00:01:22,122
from a single property and value.

24
00:01:22,122 --> 00:01:27,905
The grid-auto-rows property controls
the size of implicit row tracks and

25
00:01:27,905 --> 00:01:31,890
grid-auto-columns controls
implicit column tracks.

26
00:01:31,890 --> 00:01:38,631
In the grid rule, let's add
grid-auto-rows and set it to 250 pixels.

27
00:01:41,300 --> 00:01:46,522
So now, the implicit row tracks
take on the 250 pixel height.

28
00:01:46,522 --> 00:01:47,174
In fact,

29
00:01:47,174 --> 00:01:52,651
any implicit row track that gets created
from now on will be 250 pixels tall.

30
00:01:52,651 --> 00:01:55,569
So what do you think
will happen if we delete

31
00:01:55,569 --> 00:01:59,715
the grid-template-rows
declaration from the grid rule?

32
00:01:59,715 --> 00:02:05,200
Well, now the only explicit tracks in
our grid are the three column tracks.

33
00:02:05,200 --> 00:02:09,430
So the grid creates implicit
row tracks to hold the items.

34
00:02:09,430 --> 00:02:14,440
All grid rows are now 250 pixels
tall because they're being sized

35
00:02:14,440 --> 00:02:16,270
by grid-auto-rows.

36
00:02:16,270 --> 00:02:19,432
To create implicit rows
that are a minimum size but

37
00:02:19,432 --> 00:02:23,883
then grow to fit more content,
you can use the handy minmax function.

38
00:02:23,883 --> 00:02:32,144
For instance, I'll set grid-auto-rows
to minmax 150 pixels and

39
00:02:32,144 --> 00:02:37,195
auto, And the rows will be no shorter

40
00:02:37,195 --> 00:02:43,020
than 150 pixels and they can grow to
accommodate more content, if necessary.

41
00:02:43,020 --> 00:02:47,590
So we've seen how the grid creates rows
to accommodate the extra grid items.

42
00:02:47,590 --> 00:02:52,460
But the grid can also place extra
items into implicit columns.

43
00:02:52,460 --> 00:02:55,630
This is done using the grid
auto flow property.

44
00:02:55,630 --> 00:03:01,367
To demonstrate, I'll bring back the two
row tracks with grid-template-rows and

45
00:03:01,367 --> 00:03:03,239
set each to 100 pixels.

46
00:03:06,788 --> 00:03:11,810
Once again, the first and
second rows are part of the explicit grid.

47
00:03:11,810 --> 00:03:15,408
Wile the third and
fourth rows are in the implicit grid.

48
00:03:15,408 --> 00:03:20,010
Well, with grid-auto-flow we
can specify whether to place

49
00:03:20,010 --> 00:03:23,350
extra items inside implicit rows or
columns.

50
00:03:23,350 --> 00:03:27,830
In other words, instead of auto
placing these items inside rows,

51
00:03:27,830 --> 00:03:30,630
we can position them
alongside our columns.

52
00:03:31,700 --> 00:03:36,776
Back in the grid rule let's add
the grid-auto-flow property.

53
00:03:40,024 --> 00:03:43,764
And the default value for
grid-auto-flow is row,

54
00:03:43,764 --> 00:03:47,240
that's why we get extra rows by default.

55
00:03:47,240 --> 00:03:51,691
To switch them to columns,
set the value to column.

56
00:03:53,804 --> 00:03:58,410
And this positions the extra items
inside implicit columns instead of rows.

57
00:03:58,410 --> 00:04:02,670
So notice how the browser shifts them
inside the first two row tracks and

58
00:04:02,670 --> 00:04:04,183
positions them next to the columns.

59
00:04:04,183 --> 00:04:06,415
And with grid-auto-flow set to column,

60
00:04:06,415 --> 00:04:09,905
the grid will keep adding
new columns as necessary.

61
00:04:09,905 --> 00:04:11,335
So now we can, for example,

62
00:04:11,335 --> 00:04:17,075
control the size of implicit column tracks
with the grid-auto-columns property.

63
00:04:17,075 --> 00:04:23,283
So, let's replace grid-auto-rows
with grid-auto-columns.

64
00:04:25,660 --> 00:04:28,007
And set the value to 100 pixels.

65
00:04:30,898 --> 00:04:35,140
Now all implicit column tracks
will be 100 pixels wide.

66
00:04:35,140 --> 00:04:39,328
And if you want all columns
to be the same width use 1fr.

67
00:04:44,089 --> 00:04:48,040
Keep in mind that when you
set grid-auto-flow to column,

68
00:04:48,040 --> 00:04:51,830
you're changing the natural
flow of the grid items.

69
00:04:51,830 --> 00:04:55,510
So notice how the number order
of the grid items has changed.

70
00:04:55,510 --> 00:04:59,660
Instead of placing items one
through five across one row and

71
00:04:59,660 --> 00:05:04,910
six through ten across the next row the
number order now flows down each column.

72
00:05:04,910 --> 00:05:08,200
For example, one, two, three,
four, five, six, and so on.

73
00:05:08,200 --> 00:05:12,893
At this point feel free to add more items
to the grid container to see how grid

74
00:05:12,893 --> 00:05:15,962
positions the extra items
in the implicit grid.

75
00:05:15,962 --> 00:05:20,030
And experiment with the different
auto placement properties and values.

76
00:05:20,030 --> 00:05:22,760
Be sure to check the resources in
the teacher's notes to learn more

77
00:05:22,760 --> 00:05:25,470
about auto placement in CSS Grid Layout.

78
00:05:25,470 --> 00:05:29,030
I'll see you in the next stage where
you'll learn alternate methods for

79
00:05:29,030 --> 00:05:30,560
positioning items on the grid, for

80
00:05:30,560 --> 00:05:33,070
example, by line numbers and
name grid areas.

81
00:05:33,070 --> 00:05:35,650
And you'll work with
the new CSS Grid Inspector,

82
00:05:35,650 --> 00:05:39,360
a feature built into the Firefox
Developer Tools, that helps you

83
00:05:39,360 --> 00:05:43,240
visualize your grid as well as inspect and
debug grid layouts in the browser.