Inspect CSS Grid
This article walks you through identifying CSS grids on a website and debugging grid layout issues using customizable grid overlays.
The examples used in the figures in this article are taken from the following webpages:
Before you begin
CSS Grid is a powerful layout paradigm for the web. A great place to get started learning about CSS Grid and the many features is the CSS Grid Layout guide on MDN.
Discover CSS grids
When an HTML element on your page has
display: grid or
display: inline-grid applied to it, a
grid badge is displayed next to it in the Elements tool:
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 display the position of the 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 the grids.
The Grid section in the Layout pane contains the following 2 sub-sections:
- Overlay display settings
- Grid overlays
Overlay display settings
In the Layout tab, in the expandable Grid section, the Overlay display settings section contains the following UI.
Select one of the following options from the dropdown list:
|Hide line labels||Hide the labels of the lines for each grid overlay.|
|Show line numbers||Display the numbers of the lines for each grid overlay (selected by default).|
|Show line names||Display the names of the lines for each grid overlay when names are provided.|
The following sections explain the Overlay display settings dropdown list commands.
Hide line labels
In the dropdown list, select Hide line labels to hide the labels of the lines for each grid overlay.
Show line numbers
In the dropdown list, select Show line numbers to display the numbers of the lines for each grid overlay (selected by default).
By default, the positive and negative line numbers are displayed on the grid overlay.
For more information about negative numbers in the grid overlay, see Line-based placement with CSS Grid.
Show line names
In the dropdown list, select Show line names to view the line names instead of numbers; this displays the names of the lines for each grid overlay when names are provided. In the example, 4 lines have names:
For more information about line names in the grid overlay, see Layout using named grid lines.
Select any of the checkboxes in the Overlay display settings section:
|Show track sizes||Display (or hide) the sizes of the tracks.|
|Show area names||Display (or hide) the names of the area, when names are provided.|
|Extend grid lines||Displays (or hides) the extensions of the grid dimensions along each axis. By default, grid lines are only shown inside the element with
The following sections explain these checkboxes.
Show track sizes
Select the Show track sizes checkbox, to view the track sizes of the grid.
[authored size] and
[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 the demo, the
snack-box column sizes are defined in the
grid-template-columns:1fr 2fr; CSS. Therefore, the column line labels display both authored and computed sizes.
|Track size||Authored size||Computed size|
|1fr • 96.66px||1fr||96.66px|
|2fr • 193.32px||2fr||193.32px|
The row line labels display only computed sizes, since there are no row sizes defined in the stylesheet.
|Track size||Authored size||Computed size|
Show area names
To view the area names, select the Show area names checkbox. In the example, there are 3 areas in the grid: top, bottom1 and bottom2.
Extend grid lines
Select the Extend grid lines checkbox to extend the grid lines to the edge of the viewport along each axis.
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
To display the overlay grid for multiple grids, select the checkbox next to each name of the grid. In the example, there are 2 grid overlays enabled, that are each represented with different colors:
Customize the grid overlay color
To open the color picker and customize the grid overlay color, click the box next to the name of the grid overlay:
Highlight the grid
To highlight the HTML element in the Elements tool and scroll to it on the webpage, click the Show element in the Elements panel () icon.
Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Jecelyn Yeen (Developer advocate, Chrome DevTools).
This work is licensed under a Creative Commons Attribution 4.0 International License.