Visualize CSS Grid with DevTools
Modern browsers have grid developer tools that you can use to visualize and inspect grid layouts.
In this example, we'll use Chrome DevTools on the rainbow container.
First, open Chrome DevTools by right-clicking on the page and selecting "Inspect" or using the keyboard shortcut Ctrl + Shift + I
Transcript
0:00 Next up, I want to talk about the developer tools. Pretty much every modern browser will have some sort of grid developer tool. I'm going to open up the DevTools in Chrome on our little demo website that currently has grid enabled inside of this container.
0:14 If I go to the Elements tab, I'll zoom in a little bit, there's a Layout tab within it that I can select. Let's make this a bit larger. You'll see that there's a grid overlay section here with a single grid that it found, the div with the ID of container.
0:32 If I check this box, it might be hard to see in the video, but there's a bunch of lines now showing up. What will make this a little easier to see is if I select all of my boxes and make them very transparent.
0:46 Maybe it's easier to see there are some red lines going across here, and this is showing me the individual sections of this grid container.
0:54 Maybe not that useful right now, but when we have complicated grids with a bunch of rows and columns and different elements, it's very useful to see all the different tracks within our grid.
1:04 To toggle this on and off to get that grid overlay showing, it's inside of the Layout tab in Elements in the Chrome DevTools.
1:10 There are some other things you can turn on and off here as well that control how the DevTools work. We'll talk more about that later. I tend to leave them all checked.