Chrome DevTools: Inspecting and debugging CSS Grid

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.

Extra

• The Inspect Element feature can also provide contextual information via the Inspect Element Tooltip.
• Check out the CSS Grid and Flexbox Editor.