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.

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

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.