From the course: CSS Layouts: From Float to Flexbox and Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Firefox Grid Inspector

Firefox Grid Inspector - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial

Firefox Grid Inspector

“

- [Instructor] Here's a little extra tip for working with Grid. In your browser dev tools, you can inspect your CSS properties, but in Firefox there's a Grid inspector that has some extra features and provides a visualization. The Grid inspector can be found under the layout panel. You can also select this icon on the left, this square with the left facing arrow, to expand the rules panel to the left. And that way you can see the properties and the Grid inspector at the same time. I'm just going to resize these panels to see them a little bit better. In the HTML panel, wherever you see the Grid label, you can click on it to highlight it in the browser. It'll also open up the visualization in the Grid panel. You can also check it under this overlay Grid option as well. Let's also check the display line numbers option as well. Now we can see all the Grid line numbers as well as the 12 columns we made for the Grid, and the…

Contents