CSS Grid Inspector: Examine grid layouts

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.

For lots of interesting grid examples, check out labs.jensimmons.com.

Document Tags and Contributors

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