1
00:00:00,000 --> 00:00:05,100
[MUSIC]

2
00:00:05,100 --> 00:00:06,880
CSS Grid Layout is challenging.

3
00:00:06,880 --> 00:00:10,560
No matter how skilled you are at building
grid layouts, it can still be tough to

4
00:00:10,560 --> 00:00:14,300
understand why your grid isn't
working the way you expect.

5
00:00:14,300 --> 00:00:17,000
So the tools, features, and
concepts we'll cover in this stage

6
00:00:17,000 --> 00:00:19,930
will help make you a stronger
developer of grid layouts.

7
00:00:19,930 --> 00:00:23,680
The Firefox web browser provides
an incredibly helpful tool

8
00:00:23,680 --> 00:00:27,580
that lets you visualize, inspect, and
debug your grid layout in the browser.

9
00:00:27,580 --> 00:00:31,670
Now you may not usually use Firefox as
your primary browser, but you'll want

10
00:00:31,670 --> 00:00:35,850
to download and install it now,
just to use this one fantastic feature.

11
00:00:35,850 --> 00:00:39,920
The grid inspector tool overlays
a representation of the grid on

12
00:00:39,920 --> 00:00:41,740
top of your grid container.

13
00:00:41,740 --> 00:00:45,790
That way you're able to inspect your grid
tracks, grid lines, gutters, and more.

14
00:00:47,200 --> 00:00:51,370
The Firefox Grid Inspector is
available in Firefox version 52 and

15
00:00:51,370 --> 00:00:54,750
above, and
it's built into the Firefox dev tools.

16
00:00:54,750 --> 00:00:57,790
To begin using it,
open your page in Firefox.

17
00:00:57,790 --> 00:01:03,010
Then right or Ctrl-click on the page and
select Inspect Element.

18
00:01:03,010 --> 00:01:06,730
Then select any element
that is a grid container.

19
00:01:06,730 --> 00:01:11,116
In other words, an element with
a display property set to grid.

20
00:01:11,116 --> 00:01:15,284
And over in the Rules pane,
you should see a small grid or

21
00:01:15,284 --> 00:01:18,880
waffle icon to the left of the word grid.

22
00:01:18,880 --> 00:01:22,400
Click on the icon to toggle
the grid overlay on the page.

23
00:01:22,400 --> 00:01:24,290
So now we get to see our column and

24
00:01:24,290 --> 00:01:29,040
row grid lines, as well as all grid gaps,
right in the browser.

25
00:01:29,040 --> 00:01:33,080
Earlier in this course, you learned
that when you define grid tracks,

26
00:01:33,080 --> 00:01:38,400
the grid provides numbered lines called
grid lines to use for positioning items.

27
00:01:38,400 --> 00:01:43,900
Well in the overlay, grid lines
are represented by dashed lines and

28
00:01:43,900 --> 00:01:48,380
the gutters are shown as diagonal
dashed lines between grid tracks.

29
00:01:48,380 --> 00:01:53,295
If I turn off the grid-gap property,
you can see that our grid has

30
00:01:53,295 --> 00:01:58,930
six column grid lines and
three row grid lines.

31
00:01:58,930 --> 00:02:02,550
So the grid inspector tool
helps illustrate your grid and

32
00:02:02,550 --> 00:02:04,860
page as you're working.

33
00:02:04,860 --> 00:02:08,010
It's also a great way to
learn CSS Grid Layout.

34
00:02:08,010 --> 00:02:10,060
You can visit sites that use Grid and

35
00:02:10,060 --> 00:02:13,750
then inspect how other developers
created those layouts.

36
00:02:13,750 --> 00:02:18,180
Firefox is adding more amazing
features to Grid Inspector to improve

37
00:02:18,180 --> 00:02:19,320
how you work with Grid.

38
00:02:19,320 --> 00:02:21,550
In fact,
if you have a newer version of Firefox,

39
00:02:21,550 --> 00:02:25,480
your display might already look slightly
different that what you see here.

40
00:02:25,480 --> 00:02:30,270
But you can start using these features
right now in the Firefox Nightly browser,

41
00:02:30,270 --> 00:02:35,870
a prerelease version of Firefox, and
in the Firefox Developer Edition.

42
00:02:35,870 --> 00:02:39,650
Both browsers are for
development and testing purposes.

43
00:02:39,650 --> 00:02:42,700
So you get a sneak peek of
all the latest features and

44
00:02:42,700 --> 00:02:45,020
updates to Firefox
before they're released.

45
00:02:45,020 --> 00:02:47,420
I've posted a link to Firefox Nightly and

46
00:02:47,420 --> 00:02:50,620
the Developer Edition
in the teacher's notes.

47
00:02:50,620 --> 00:02:54,500
So now I'm previewing the workspace
in Firefox Nightly and

48
00:02:54,500 --> 00:02:56,520
I have the dev tools open.

49
00:02:56,520 --> 00:02:59,480
You can still select the grid container,
and

50
00:02:59,480 --> 00:03:03,450
click the grid icon to overlay the grid,
but

51
00:03:03,450 --> 00:03:08,780
you'll also see a layout tab,
containing a panel labelled Grid.

52
00:03:08,780 --> 00:03:13,110
The grid panel shows you exactly which
elements on your page are grid containers.

53
00:03:13,110 --> 00:03:17,100
Here, you click the check box
next to the grid container name

54
00:03:17,100 --> 00:03:19,430
to toggle the grid overlay.

55
00:03:19,430 --> 00:03:22,540
And there's a lot more you can do
now to help illustrate your grid.

56
00:03:22,540 --> 00:03:26,910
For example, in the grid overlay, if you
think the grid lines are not as noticeable

57
00:03:26,910 --> 00:03:29,500
as you'd like them to be,
maybe they're too light.

58
00:03:29,500 --> 00:03:33,800
Click the color swatch icon to
the right of the grid container name

59
00:03:33,800 --> 00:03:38,480
to open a color picker that lets you
change the color of the grid lines.

60
00:03:40,010 --> 00:03:44,550
The diagram below shows you
the individual grid cells

61
00:03:44,550 --> 00:03:47,930
that make up the grid based on the row and
column tracks.

62
00:03:47,930 --> 00:03:50,320
Hover over one and
the browser will highlight it and

63
00:03:50,320 --> 00:03:52,150
provide you information about it.

64
00:03:52,150 --> 00:03:54,940
For example, the tool tip above this cell

65
00:03:54,940 --> 00:03:59,190
lets me know that it starts on
row line 2 and column line 1.

66
00:03:59,190 --> 00:04:03,440
One of the best parts is that
under Grid Display Setting

67
00:04:03,440 --> 00:04:08,250
you can check Display line numbers
to see the grid line numbers.

68
00:04:08,250 --> 00:04:11,380
Here we see column lines 1 through 6.

69
00:04:11,380 --> 00:04:14,640
And row lines 1 through 3.

70
00:04:14,640 --> 00:04:17,690
This will make it easier to
position items on the grid, and

71
00:04:17,690 --> 00:04:22,060
help you understand the line placements
we'll cover in the next video.

72
00:04:22,060 --> 00:04:25,980
Now the regular version of Firefox
should get these updates sometime in

73
00:04:25,980 --> 00:04:27,010
the near future.

74
00:04:27,010 --> 00:04:30,800
By the time you're watching this video
they may already be available in Firefox.

75
00:04:30,800 --> 00:04:35,540
And support for CSS Grid Layout in
Chrome dev tools is also in the works.

76
00:04:35,540 --> 00:04:38,010
So soon they'll have
similar feature to this.

77
00:04:38,010 --> 00:04:40,330
So be sure to check
the teacher's notes for updates.