Inspect CSS Grid

This guide shows you how to discover CSS grids on a page, examining them and debugging layout issues in the Elements panel of Chrome DevTools.

The examples shown in the screenshots appearing in this article are from these two web pages: Fruit box and Snack box.

Discover CSS grids #

When an HTML element on your page has display: grid or display: inline-grid applied to it, you can see a grid badge next to it in the Elements panel.

Clicking the badge to toggle the display of a grid overlay on the page. The overlay appears over the element, laid out like a grid to show the position of its grid lines and tracks:

Open the Layout pane. When grids are included on a page, the Layout pane includes a Grid section containing a number of options for viewing those grids.

Grid viewing options #

The Grid section in the Layout pane contains 2 sub sections:

• Overlay display settings
• Grid overlays

Let's look into each of these sub sections in detail.

Overlay display settings #

The Overlay display settings consists of 2 parts:

a. A dropdown menu with options within:

• Hide line labels: Hide the line labels for each grid overlay.
• Show lines number: Show the line numbers for each grid overlay (selected by default).
• Show line names: Show the line names for each grid overlay in the case of grids with line names.

b. Checkboxes with options within:

• Show track sizes: Toggle to show or hide track sizes.
• Show area names: Toggle to show or hide area names, in the case of grids with named grid areas.
• Extend grid lines: By default, grid lines are only shown inside the element with display: grid or display: inline-grid set on it; when toggling this option on, the grid lines extend to the edge of the viewport along each axis.

Let's examine these settings in more detail.

Show line numbers #

By default, the positive and negative line numbers are displayed on the grid overlay.

Hide line labels #

Select Hide line labels to hide the line numbers.

Show line names #

You can select Show line names to view the line names instead of numbers. In this example, we have 4 lines with names: left, middle1, middle2 and right.

In this demo, orange element spans from left to right, with CSS grid-column: left / right. Showing line names make it easier to visualize the start and end position of the element.

Show track sizes #

Enable the Show track sizes checkbox to view the track sizes of the grid.

DevTools will display [authored size] - [computed size] in each line label: Authored size: The size defined in stylesheet (omitted if not defined). Computed size: The actual size on screen.

In this demo, the snack-box column sizes are defined in the CSS grid-template-columns:1fr 2fr;. Therefore, the column line labels show both authored and computed sizes: 1fr - 96.66px and 2fr - 193.32px.

The row line labels show only computed sizes: 80px and 80px since there are no row sizes defined in the stylesheet.

Show area names #

To view the area names, enable the Show area names checkbox. In this example, there are 3 areas in the grid - top, bottom1 and bottom2.

Extend grid lines #

Enable the Extend grid lines checkbox to extend the grid lines to the edge of the viewport along each axis.

Grid overlays #

The Grid overlays section contains a list of grids that are present on the page, each with a checkbox, along with various options.

Enable overlay views of multiple grids #

You can enable overlay views of multiple grids. In this example, there are 2 grid overlays enabled - main and div.snack-box, each represented with different colors.

Customize the grid overlay color #

You can customize each grid overlay color by clicking the color picker.

Highlight the grid #

Click the highlight icon to immediately highlight the HTML element, scroll to it in the page and select it in the Elements panel.