Preview
Video Player
00:00
00:00
Firefox Grid Inspector Tool
4:40The Firefox web browser provides a helpful tool that lets you visualize, inspect and debug your grid layout in the browser. The Grid inspector tool overlays a representation of the grid on top of your grid container. That way you're able to inspect your grid tracks, grid lines, gutters and more.
[MUSIC]
0:00
CSS Grid Layout is challenging.
0:05
No matter how skilled you are at building
grid layouts, it can still be tough to
0:06
understand why your grid isn't
working the way you expect.
0:10
So the tools, features, and
concepts we'll cover in this stage
0:14
will help make you a stronger
developer of grid layouts.
0:17
The Firefox web browser provides
an incredibly helpful tool
0:19
that lets you visualize, inspect, and
debug your grid layout in the browser.
0:23
Now you may not usually use Firefox as
your primary browser, but you'll want
0:27
to download and install it now,
just to use this one fantastic feature.
0:31
The grid inspector tool overlays
a representation of the grid on
0:35
top of your grid container.
0:39
That way you're able to inspect your grid
tracks, grid lines, gutters, and more.
0:41
The Firefox Grid Inspector is
available in Firefox version 52 and
0:47
above, and
it's built into the Firefox dev tools.
0:51
To begin using it,
open your page in Firefox.
0:54
Then right or Ctrl-click on the page and
select Inspect Element.
0:57
Then select any element
that is a grid container.
1:03
In other words, an element with
a display property set to grid.
1:06
And over in the Rules pane,
you should see a small grid or
1:11
waffle icon to the left of the word grid.
1:15
Click on the icon to toggle
the grid overlay on the page.
1:18
So now we get to see our column and
1:22
row grid lines, as well as all grid gaps,
right in the browser.
1:24
Earlier in this course, you learned
that when you define grid tracks,
1:29
the grid provides numbered lines called
grid lines to use for positioning items.
1:33
Well in the overlay, grid lines
are represented by dashed lines and
1:38
the gutters are shown as diagonal
dashed lines between grid tracks.
1:43
If I turn off the grid-gap property,
you can see that our grid has
1:48
six column grid lines and
three row grid lines.
1:53
So the grid inspector tool
helps illustrate your grid and
1:58
page as you're working.
2:02
It's also a great way to
learn CSS Grid Layout.
2:04
You can visit sites that use Grid and
2:08
then inspect how other developers
created those layouts.
2:10
Firefox is adding more amazing
features to Grid Inspector to improve
2:13
how you work with Grid.
2:18
In fact,
if you have a newer version of Firefox,
2:19
your display might already look slightly
different that what you see here.
2:21
But you can start using these features
right now in the Firefox Nightly browser,
2:25
a prerelease version of Firefox, and
in the Firefox Developer Edition.
2:30
Both browsers are for
development and testing purposes.
2:35
So you get a sneak peek of
all the latest features and
2:39
updates to Firefox
before they're released.
2:42
I've posted a link to Firefox Nightly and
2:45
the Developer Edition
in the teacher's notes.
2:47
So now I'm previewing the workspace
in Firefox Nightly and
2:50
I have the dev tools open.
2:54
You can still select the grid container,
and
2:56
click the grid icon to overlay the grid,
but
2:59
you'll also see a layout tab,
containing a panel labelled Grid.
3:03
The grid panel shows you exactly which
elements on your page are grid containers.
3:08
Here, you click the check box
next to the grid container name
3:13
to toggle the grid overlay.
3:17
And there's a lot more you can do
now to help illustrate your grid.
3:19
For example, in the grid overlay, if you
think the grid lines are not as noticeable
3:22
as you'd like them to be,
maybe they're too light.
3:26
Click the color swatch icon to
the right of the grid container name
3:29
to open a color picker that lets you
change the color of the grid lines.
3:33
The diagram below shows you
the individual grid cells
3:40
that make up the grid based on the row and
column tracks.
3:44
Hover over one and
the browser will highlight it and
3:47
provide you information about it.
3:50
For example, the tool tip above this cell
3:52
lets me know that it starts on
row line 2 and column line 1.
3:54
One of the best parts is that
under Grid Display Setting
3:59
you can check Display line numbers
to see the grid line numbers.
4:03
Here we see column lines 1 through 6.
4:08
And row lines 1 through 3.
4:11
This will make it easier to
position items on the grid, and
4:14
help you understand the line placements
we'll cover in the next video.
4:17
Now the regular version of Firefox
should get these updates sometime in
4:22
the near future.
4:25
By the time you're watching this video
they may already be available in Firefox.
4:27
And support for CSS Grid Layout in
Chrome dev tools is also in the works.
4:30
So soon they'll have
similar feature to this.
4:35
So be sure to check
the teacher's notes for updates.
4:38