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.