1
00:00:00,430 --> 00:00:04,351
When you create a Grid Layout, you are
defining what's called an explicit grid.

2
00:00:04,351 --> 00:00:08,643
That just means it's the grid you
defined with the grid-template-rows and

3
00:00:08,643 --> 00:00:10,965
grid-template-columns properties.

4
00:00:10,965 --> 00:00:14,654
You explicitly told the browser
that this is the grid you want.

5
00:00:14,654 --> 00:00:18,968
But, what happens if there are too many
grid items to fit inside the grid you

6
00:00:18,968 --> 00:00:19,597
defined?

7
00:00:19,597 --> 00:00:24,885
For example, say you declare a grid with
three column tracks and two row tracks.

8
00:00:24,885 --> 00:00:28,470
The explicit grid can only fit six items.

9
00:00:28,470 --> 00:00:31,496
What if later, your grid
container has nine items or more,

10
00:00:31,496 --> 00:00:33,318
what happens to those extra items?

11
00:00:33,318 --> 00:00:38,223
This kind of situation is common when your
page content is dynamically generated and

12
00:00:38,223 --> 00:00:42,900
you don't know ahead of time how many
grid items will appear on the page.

13
00:00:42,900 --> 00:00:45,083
For instance,
a listing of photo thumbnails and

14
00:00:45,083 --> 00:00:48,652
descriptions that are created on a
photo-sharing site could vary depending on

15
00:00:48,652 --> 00:00:51,597
whose photo it's displaying and
the length of the description.

16
00:00:51,597 --> 00:00:56,526
So to handle this uncertainty,
Grid Layout provides an implicit grid.

17
00:00:56,526 --> 00:01:00,677
The implicit grid is automatically
generated by the grid container

18
00:01:00,677 --> 00:01:04,262
to position any extra items
outside of the explicit grid.

19
00:01:04,262 --> 00:01:08,716
This is an important concept to keep in
mind when creating your grid because it

20
00:01:08,716 --> 00:01:12,482
will help you determine the placement and
size of all grid items,

21
00:01:12,482 --> 00:01:15,270
even items you may not have accounted for.

22
00:01:15,270 --> 00:01:18,192
And it will help you create
better Grid Layouts overall.

23
00:01:18,192 --> 00:01:21,288
We've already been working
with implicit tracks.

24
00:01:21,288 --> 00:01:25,574
Remember when we first defined column
tracks at the beginning of the course?

25
00:01:25,574 --> 00:01:31,415
Even though we hadn't set row tracks, as
we added new grid items to the container,

26
00:01:31,415 --> 00:01:34,843
the grid implicitly placed
the items into rows.

27
00:01:34,843 --> 00:01:40,228
Also, in the previous video, we created
a flexible grid that as you resize

28
00:01:40,228 --> 00:01:45,455
the viewport, adjusts from three
columns to two columns to one column.

29
00:01:45,455 --> 00:01:48,159
But we only set two row tracks,

30
00:01:48,159 --> 00:01:53,368
the first to 100 pixels and
the second to 200 pixels.

31
00:01:53,368 --> 00:01:57,016
So the third row is in the implicit grid.

32
00:01:57,016 --> 00:02:00,549
And as the container wraps
items onto new rows,

33
00:02:00,549 --> 00:02:05,420
the grid creates more implicit
row tracks to position the items.

34
00:02:05,420 --> 00:02:08,428
Let's explore how and why this happens.

35
00:02:08,428 --> 00:02:13,362
I'm going to define just three
flexible column tracks by setting

36
00:02:13,362 --> 00:02:17,501
grid-template-columns to 1fr,
1fr, and 1fr.

37
00:02:17,501 --> 00:02:19,435
And we'll keep the two row tracks.

38
00:02:19,435 --> 00:02:24,205
So we've explicitly defined three
column tracks and two row tracks.

39
00:02:24,205 --> 00:02:29,910
So grid items positioned inside these
tracks will be part of the explicit grid.

40
00:02:29,910 --> 00:02:33,446
And any items placed outside of
these defined grid tracks will be in

41
00:02:33,446 --> 00:02:34,529
the implicit grid.

42
00:02:34,529 --> 00:02:37,975
In the browser,
we see the three flexible columns.

43
00:02:37,975 --> 00:02:42,338
The first row is 100 pixels tall and
the second 200 pixels.

44
00:02:42,338 --> 00:02:44,674
But, what about the bottom row?

45
00:02:44,674 --> 00:02:46,920
Why is it much shorter
than the rows above it?

46
00:02:46,920 --> 00:02:51,639
Well, you see, the explicit grid
we created fits six grid items,

47
00:02:51,639 --> 00:02:54,517
three items inside each of the two rows.

48
00:02:54,517 --> 00:02:59,257
However, there are eight items
inside the grid container.

49
00:02:59,257 --> 00:03:04,461
So an implicit row track was created
to accommodate the extra two items.

50
00:03:04,461 --> 00:03:07,455
This extra row is in the implicit grid.

51
00:03:07,455 --> 00:03:12,952
And if you add more grid items,
for example, two more items,

52
00:03:15,282 --> 00:03:20,780
The grid will create as many implicit
row tracks as needed to fit the items.

53
00:03:20,780 --> 00:03:24,089
In this case, it creates one more row.

54
00:03:24,089 --> 00:03:28,454
Just imagine adding any number of
extra elements to a float-based or

55
00:03:28,454 --> 00:03:30,043
inline-block layout.

56
00:03:30,043 --> 00:03:32,201
It would most likely break the layout.

57
00:03:32,201 --> 00:03:34,731
Then you'd have to spend
costly time fixing it.

58
00:03:34,731 --> 00:03:39,612
So this is a prime example of just
how intelligent Grid Layout is at

59
00:03:39,612 --> 00:03:41,230
placing items.

60
00:03:41,230 --> 00:03:45,143
It makes sure that every grid item has
a well-defined grid area to lay out into.

61
00:03:45,143 --> 00:03:50,880
Now, notice how the extra two rows
are not as tall as the top two rows.

62
00:03:50,880 --> 00:03:55,411
Well, this is because implicit
tracks are auto-sized by default.

63
00:03:55,411 --> 00:03:58,220
So their size is based on content.

64
00:03:58,220 --> 00:04:01,761
In this case, the rows' heights
are as tall as the content they hold.

65
00:04:01,761 --> 00:04:06,092
And if you need to set their height,
you could define a third and

66
00:04:06,092 --> 00:04:09,383
fourth row track with grid-template-rows.

67
00:04:09,383 --> 00:04:12,989
And the extra items will then
be placed in the explicit grid.

68
00:04:12,989 --> 00:04:17,414
But you might not always have control over
the number of items in implicit tracks.

69
00:04:17,414 --> 00:04:19,984
What if more items are added
to the container and

70
00:04:19,984 --> 00:04:22,877
another implicit row is created and
yet another, and

71
00:04:22,877 --> 00:04:25,721
you need those implicit
tracks to be a certain size?

72
00:04:25,721 --> 00:04:30,201
For example, your grid container might
be a section of a site that users post

73
00:04:30,201 --> 00:04:33,782
content to, like an image gallery or
a section of articles.

74
00:04:33,782 --> 00:04:38,641
Updating your grid-template-rows
tracklist every time new items are added

75
00:04:38,641 --> 00:04:42,182
would be counterproductive and
cause bloat in your CSS.

76
00:04:42,182 --> 00:04:46,965
So Grid provides smarter, more
efficient ways to control the size and

77
00:04:46,965 --> 00:04:49,670
placement of implicit grid tracks.

78
00:04:49,670 --> 00:04:51,340
I'll teach you about
them in the next video.