Grid icons in the Rules view
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
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.
- For lots of interesting grid examples, check out labs.jensimmons.com.