Firefox Developer Tools

CSS Grid Inspector: Examine grid layouts

Grid icons in the Rules view

New in Firefox 52

Starting in Firefox 52 DevTools, you can ask the Inspector to overlay a representation of the grid when inspecting grid layouts.

When an element in the Rules view has a display: grid declaration, then it gets a grid icon next to it: . Click the icon to display the grid overlaid on the page, including grid lines and tracks:

The overlay is still shown when you select other elements, so you can edit the CSS for grid items and see how the grid is affected.

The Grid Layout panel

New in Firefox 56

Firefox 56 builds on previous grid features, providing an entire new layout panel full of options and information for debugging grids. You can find all the information you need about this in Powerful New Additions to the CSS Grid Inspector in Firefox Nightly.

 

See also

Document Tags and Contributors

 Contributors to this page: jensimmons, chrisdavidmills, wbamberg, be47liberty, dvincent, kdubb
 Last updated by: jensimmons,