Inspect CSS grid layouts

This guide shows you how to discover CSS grids on a page, examine them, and debug 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.

Click 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.

# Align grid items and their content with the Grid Editor

You can align grid items and their content with a click of a button instead of typing CSS rules.

To align grid items and their content:

1. In the Elements > Styles pane, click the Grid Editor button next to display: grid.

   

2. In the Grid Editor, click the corresponding buttons to set the align-* and justify-* CSS properties for the grid items and their content.

   

3. Observe the adjusted grid items and content in the viewport.

# 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 two parts:

a. A drop-down menu with the following options:

• Hide line labels: Hide the line labels for each grid overlay.
• Show line numbers: 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 four lines with names: left, middle1, middle2 and right.

In this demo, the orange element spans from left to right, with CSS grid-column: left / right. Showing line names makes 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 the stylesheet (omitted if not defined). Computed size: The actual size on the 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 three 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 two 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.