Introduction

CSS Grid inspection is now possible from the Elements Panel. This is helpful for debugging CSS issues, and learning more about CSS Grid.

There's also a dedicated Layout Pane in the Elements Panel, which provides customization options for the CSS Grid Inspector. You can view:

• Grid lines
• Track sizes
• Area names

Which can all be helpful in understanding how rows and columns play a part within a CSS Grid.

How to use this feature

1. Locate an element using display: grid.
2. Click the label marked grid in the DOM Tree.
3. Select Show Layout from the Command Menu (Cmd + Shift + P).
4. Explore the different options available here, such as:
   • Toggling Grid overlays on and off.
   • Enabling track sizes, area names and extended grid lines.

Note, if you do not see a Layout Pane in the Elements Panel, then you can check that CSS Grid Debugging is enabled:

1. Open Show Experiments from the Command Menu (Cmd + Shift + P).
2. Check the box labelled Enable new CSS Grid debugging features.
3. Restart DevTools with the shortcut Alt + R.

The Inspect Element feature can also provide contextual information via the Inspect Element Tooltip.