CSS has grid layouts, which allow developers to arrange elements in rows and columns. In DevTools, the Elements tool provides a layout pane where you can customize various options related to the inspection of any grid layout on the page.
Benefits of inspecting the CSS grid
The various benefits of inspecting CSS grids are:
- Visualizing the Grid: You can visualize the grid using the Edge DevTools. This will allow you to check for grid area, gaps, and various other properties that can be hard to visualize.
- Responsive Grid Design: You can use DevTools to inspect the grid of the web page and check for its responsiveness. The information gained from the inspection can be used to improve the layout to behave differently on different screen sizes.
- Improve accessibility: The developers can improve accessibility around the grid layout after the inspection. The changes made can greatly improve focus management using the keyboard.
How to Inspect a Grid
To inspect the grid layout of an element on a web page, follow these steps:
Step 1: Using Edge, visit a site that uses grid layouts. Right-click on the page and select Inspect from the context menu that appears. This will open DevTools.
Step 2: Click the Elements tab in the DevTools and in the DOM, find elements with a grid label, or use the inspect tool to focus the element in the DOM. Click on the grid label to activate the grid inspection.
Inspecting a Grid
How to open Grid section
The grid section is present in the layout pane in the Elements tab in DevTools. To locate it, follow these steps.
Step 1: Visit the web page where you want to inspect the grid. Right-click on the page and select Inspect from the context menu that appears.
Step 2: The DevTools will appear with the elements tab in focus. If the elements tab is not open, then click Elements from the main toolbar.
Step 3: In the Elements tab, select the Layout pane. In the pane, you will find a grid section with various options.
Locating Grid Section
Various options for Grid overlay
The layout pane in the elements tool provides options for CSS grid and flexbox. In the grid section, you have various overlay options related to visual inspection, such as colors and lines.
The various options under this grid section are:
-
Overlay display settings: Under this, you get various options to enable the name and line label for the overlay.
-
Drop-down list
- Hide line labels: Select this to hide any kind of line label, which can be a number or name.
- Show line numbers: Select this to get line numbers in the grid overlay.
- Show line names: Select this if you want to display the line name, but only if it is set in CSS.
-
Checkboxes
- Show track sizes: If checked, then in the web page grid, row and column sizes are labeled.
- Show area names: If checked, then in the web page grid area name is a mention of various areas of the grid layout of the selected element.
- Extend grid lines: If checked on the web page, the line around the grid is extended around the whole viewport with dotted lines.
-
Drop-down list
- Grid overlays display the grid elements along with their respective colors, which you can change using the color picker. At the end of the listed element, there is a button to focus the grid in the Elements tab.
Grid options in Layout pane
Inspection of a Grid
Let’s inspect a CSS grid on the GFG site.
Step 1: Visit the site and open the Elements tab in DevTools.
Step 2: In DevTools, locate the grid section under the layout pane.
Step 3: Various grids of the site will be listed in this section. Inspect the grid and use the various options provided if required.
Inspecting a Grid in GFG site
CSS Grid is very useful layout which can be made responsive but dealing with grids can be hard for developers. Edge provides Grid inspection with the help of color and lines you can understand the grid structure of the grid layout.