Firefox Grid Inspector Tool4:40 with Guil Hernandez
The 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 prerelase 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
You need to sign up for Treehouse in order to download course files.Sign up