Let's examine these settings in more detail.

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.

Show area names: Toggle to show or hide area names, in the case of grids with named grid areas.

Show track sizes: Toggle to show or hide track sizes.

Show line names: Show the line names for each grid overlay in the case of grids with line names.

Show lines number: Show the line numbers for each grid overlay (selected by default).

Hide line labels: Hide the line labels for each grid overlay.

A drop-down menu with the following options: The Overlay display settings consists of two parts:Ī. Let's look into each of these sub sections in detail. The Grid section in the Layout pane contains 2 sub sections: Observe the adjusted grid items and content in the viewport. In the Grid Editor, click the corresponding buttons to set the align-* and justify-* CSS properties for the grid items and their content. In the Elements > Styles pane, click the Grid Editor button next to display: grid.

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

# Align grid items and their content with the Grid Editor When grids are included on a page, the Layout pane includes a Grid section containing a number of options for viewing those grids. The overlay appears over the element, laid out like a grid to show the position of its grid lines and tracks: 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.Ĭlicking the badge to toggle the display of a grid overlay on the page. The examples shown in the screenshots appearing in this article are from these two web pages: Fruit box and Snack box.

Google web tool