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