本指南介绍如何在 Chrome 开发者工具的 Elements 面板中发现页面上的 CSS 网格、检查 CSS 网格，以及调试布局问题。
本文中显示的屏幕截图中显示的示例来自以下两个网页：水果盒和零食盒。
探索 CSS 网格
当网页上的某个 HTML 元素应用了 display: grid 或 display: inline-grid 后，在 Elements 面板中，您会在该元素旁边看到 grid 标志。
点击该标志可切换页面上网格叠加层的显示。叠加层会显示在该元素上方，其布局类似于网格，以显示其网格线和轨迹的位置：
打开 Layout 窗格。当页面上包含网格时，Layout 窗格会包含一个 Grid 部分，其中包含用于查看这些网格的多种选项。
使用网格编辑器对齐网格项及其内容
只需点击一下按钮，即可对齐网格项及其内容，而无需输入 CSS 规则。
如需对齐网格项及其内容，请执行以下操作：
在 Elements > Styles 窗格中，点击
display: grid旁边的
网格编辑器按钮。
在网格编辑器中，点击相应的按钮，为网格项及其内容设置
align-*和justify-*CSS 属性。
观察视口中调整后的网格项和内容。
网格查看选项
Layout 窗格中的 Grid 部分包含 2 个子部分：
- 叠加层显示设置
- 网格叠加层
我们来详细了解一下每个子部分。
叠加层显示设置
叠加层显示设置由两部分组成：
a. 包含以下选项的下拉菜单：
- 隐藏线条标签：隐藏每个网格叠加层的线条标签。
- 显示行号：显示每个网格叠加层的线号（默认处于选中状态）。
- 显示线条名称：如果网格包含线条名称，则显示每个网格叠加层的线条名称。
b. 包含以下选项的复选框：
- 显示轨道大小：切换以显示或隐藏轨道大小。
- 显示区域名称：切换以显示或隐藏区域名称（如果是具有已命名网格区域的网格）。
- 延伸网格线：默认情况下，网格线仅显示在设置了
display: grid或display: inline-grid的元素内部；开启此选项时，网格线会沿着每个轴延伸到视口的边缘。
我们来详细了解一下这些设置。
显示行号
默认情况下，正号和负号均会显示在网格叠加层上。
隐藏线条标签
选择隐藏行标签以隐藏行号。
显示线路名称
您可以选择显示行名称，查看行名称，而不是数字。在此示例中，我们有四行内容，名称分别为：left、medium1、 Middle2 和 right。
在此演示中，orange 元素从左到右跨越到 CSS grid-column: left / right。显示线条名称可让您更轻松地直观了解元素的起始位置和结束位置。
显示轨道尺寸
选中显示轨迹大小复选框可查看网格的轨迹大小。
开发者工具会在每个行标签中显示 [authored size] - [computed size]：Authored size：样式表中定义的尺寸（如果未定义，则省略）。计算出的尺寸：屏幕上的实际尺寸。
在此演示中，snack-box 列大小是在 CSS grid-template-columns:1fr 2fr; 中定义的。因此，列行标签会显示原创大小和计算得出的大小：1fr - 96.66px 和 2fr - 193.32px。
行线标签仅显示计算得出的尺寸：80px 和 80px，因为样式表中未定义行大小。
显示区域名称
要查看区域名称，请选中显示区域名称复选框。在此示例中，网格中有三个区域：top、bottom1 和 bottom2。
延长网格线
选中延长网格线复选框可将网格线沿着每个轴延伸到视口的边缘。
网格叠加层
网格叠加层部分包含页面上显示的一系列网格，其中每个网格都带有一个复选框以及各种选项。
启用多个网格的叠加视图
您可以启用多个网格的叠加视图。在此示例中，启用了两个网格叠加层：main 和 div.snack-box，分别以不同的颜色表示。
自定义网格叠加层颜色
您可以通过点击颜色选择器自定义每种网格叠加层颜色。
突出显示网格
点击突出显示图标即可立即突出显示相应 HTML 元素，然后在页面中滚动到该元素并在“元素”面板中将其选中。
