使用“元素”工具中的“布局”选项卡可识别网站上的 CSS 网格，并使用可自定义的网格覆盖调试网格布局问题。
详细内容：
在呈现的网页中显示网格覆盖
CSS 网格是一种功能强大的 Web 布局范例。 MDN 的 CSS 网格布局 是了解 CSS 网格及其功能的一个很好的网页。
若要在呈现的网页中使用网格覆盖：：
转到使用 CSS 网格布局的页面，例如新窗口或选项卡中的 “检查 CSS 网格布局 ”演示页。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开，其中选择了 “元素” 工具，显示 DOM 树。
在 DOM 树中，展开 正文>主体。
元素
<div>具有 网格 锁屏提醒：
当网页中的 HTML 元素已
display: grid或display: inline-grid应用于该元素时， 网格 锁屏提醒会显示在 “元素” 工具的 DOM 树中的元素旁边。单击元素旁边的 网格 锁屏提醒，例如
<div class="fruit-box">：
网格覆盖显示在呈现网页中的 元素上。 网格锁屏提醒从白色背景上的蓝色文本更改为蓝色背景上的白色文本。
在呈现的网页中，CSS 网格覆盖显示在网页元素前面的层上。 CSS 网格覆盖显示网格线 (行和列) 和轨道的位置。
如果多次单击 网格 锁屏提醒，它将打开和关闭。
同样，有时有 一个子网格 锁屏提醒。 可以通过单击子网格锁屏提醒来切换子 网格 覆盖层。 请参阅 MDN 的 Subgrid 。
单击“布局”选项卡，该选项卡与“元素”工具中的“样式”选项卡分组：
“ 布局 ”选项卡包括 “网格/网格通道 ”部分，其中包括：
- 下拉列表。
- 显示选项的复选框。
- 每个使用 CSS 网格布局的元素的复选框。
当网页使用 CSS 网格时，“ 布局 ”选项卡包括“ 网格/网格通道 ”部分。 使用 “网格/网格通道 ”部分可以配置在呈现的网页上的网格覆盖中显示的信息。
对齐网格项及其内容：网格编辑器弹出窗口
只需单击按钮 (打开网格编辑器弹出窗口) 即可对齐 CSS 网格项及其内容，而无需直接定义 CSS 规则。
若要对齐 CSS 网格项及其内容，
执行上述在 呈现的网页中显示网格覆盖中的步骤。
因此，为 DOM 树中的元素选择了“ 布局 ”选项卡， (例如
<div class="fruit-box">具有 网格 锁屏提醒的) 。选择“ 样式 ”选项卡。
查找具有 “打开网格编辑器 ”按钮的 CSS 规则，例如规则
.fruit-box：
在 CSS 规则的 旁边
display: grid，单击“ 打开网格编辑器 ”按钮。此时会打开 网格编辑器 弹出窗口：
网格编辑器弹出窗口包含四组按钮作为选项：
- align-content
- justify-content
- align-items
- justify-items
在每组按钮中，这些按钮都是互斥的选项按钮。 如果单击选项按钮两次，则不会在该集中选择任何选项按钮，并且值将返回 normal。
在 网格编辑器 弹出窗口的任意按钮集中，单击一个按钮。 若要 恢复正常，请单击按钮两次。
按钮的前景色从黑色更改为蓝色，值从 普通 更改为所选值。
网格项和内容在视区中重新呈现。
网格查看选项
“布局”窗格中的“网格/网格通道”部分包含两个子部分：
详细信息如下所示。
覆盖显示设置
在 “元素 ”工具的“ 布局 ”窗格中，在“可展开的 网格/网格通道 ”部分中，有“ 覆盖显示设置” 子部分：
“覆盖显示设置”子部分由两部分组成：
一个下拉列表，其中包含以下命令：
复选框：
详细信息如下所示。
显示行号
可以在呈现网页的网格覆盖中显示或隐藏行) 号 (行和列。 在 CSS 网格中， 行号 用于标识分隔 CSS 网格的行和列的垂直和水平线。 这些行号不适用于 HTML 源文件中的代码行。
显示或隐藏网格覆盖) 行和列 (行号：
执行上述在 呈现的网页中显示网格覆盖中的步骤。
在 “网格/网格通道 ”部分“ >覆盖显示设置” 子部分 >“显示行标签 ”下拉列表中，选择“ 显示行号”。 默认情况下，此选项处于选中状态。
将显示每个网格覆盖) 行 (行数和列数：
默认情况下，) 行和列 (正行号和负行号显示在网格覆盖上。 有关网格覆盖中的负数的信息，请参阅在 MDN 上使用基于线的放置在网格布局中向后计数。
隐藏线条标签
若要隐藏网格覆盖中的线条标签，请执行以下作：
执行上述在 呈现的网页中显示网格覆盖中的步骤。
在 “网格/网格通道 ”部分“ >覆盖显示设置” 子部分中 >“显示线条标签 ”下拉列表中，选择“ 隐藏线条标签” ：
每个网格覆盖上隐藏 (行/列) 的标签。
显示行名
在呈现网页的网格覆盖中，可以显示行名。 这样可以更轻松地可视化元素的开始和结束位置。
若要在网格覆盖中显示行名，请使用以下命令：
执行上述在 呈现的网页中显示网格覆盖中的步骤。
在 “网格/网格通道 ”部分 >“覆盖显示设置” 子部分中 >“显示行标签 ”下拉列表中，选择“ 显示行名”：
将显示行名而不是数字。 此选项显示每个网格覆盖线的名称（如果提供了名称）。
在上面的示例中，4 行具有名称：
left、middle1、middle2和right。在演示中，Orange 元素通过 和
grid-column: rightCSS 规则从左到右grid-column: left跨越。
另请参阅：
- 在 MDN 中使用命名网格线的布局。
显示曲目大小
在呈现网页的网格覆盖中，可以显示轨迹大小。
若要在网格覆盖区中显示轨道大小，请使用以下命令：
执行上述在 呈现的网页中显示网格覆盖中的步骤。
在 “元素” 工具的“ 布局 ”选项卡的“ 网格/网格通道 ”部分的“ 网格/网格通道覆盖 ”子部分中，选中要显示网格覆盖的每个元素的复选框。 例如，选中 和
div.snack-box旁边的div.fruit-box复选框。在 “网格/网格通道 ”部分 >“覆盖显示设置” 子部分中，选中“ 显示轨道大小 ”复选框：
如果 CSS) 和 computed size中定义了，则每个行标签都显示 authored size (：
| Size | 详细信息 |
|---|---|
authored size |
CSS 样式表中定义的大小。 如果未定义，则从标签中省略。 |
computed size |
屏幕上的实际大小。 |
在演示中，在 CSS 属性 grid-template-columns中，列大小定义如下：
.fruit-box {
display: grid;
grid-template-columns: [left] 1fr [middle1] 1fr [middle2] 1fr [right];
...
}
.snack-box {
display: grid;
grid-template-columns: 1fr 2fr;
...
}
列标签：
对于演示的 元素 <div class="snack-box">，网格列上会显示以下轨道大小行标签：
| 轨道大小 | 创作大小 | 计算大小 |
|---|---|---|
| 1fr • 96.66px | 1fr | 96.66px |
| 2fr • 193.34px | 2fr | 193.34px |
如果计算机的显示器设置为不同的像素密度，则演示可能会生成不同的值，例如像素的一半。
除了 之外，每个网格列上的线条标签还显示 authored sizecomputed size，因为列大小已 (指定) 创作，位于 CSS 样式表中的 CSS 属性 grid-template-columns 中。
行标签：
对于演示的 元素 <div class="snack-box">，网格行上会显示以下轨道大小行标签：
| 轨道大小 | 创作大小 | 计算大小 |
|---|---|---|
| 80px | 不适用 | 80px |
| 80px | 不适用 | 80px |
如果计算机的显示器设置为不同的像素密度，则演示可能会生成不同的值，例如像素的一半。
每个网格行上的线条标签不显示 ，仅computed size显示 authored size，因为尚未创作行大小 (CSS 样式表中的 CSS 属性grid-template-rows中指定的) 。
另请参阅：
- MDN 处的 grid-template-columns。
- MDN 处的 grid-template-rows。
显示区域名称
在呈现网页的网格覆盖中，可以显示区域名称，如 top、 bottom1 和 bottom2。
显示区域名称：
执行上述在 呈现的网页中显示网格覆盖中的步骤。
在 “网格/网格通道 ”部分 >“覆盖显示设置” 子部分中，选中“ 显示区域名称 ”复选框：
扩展网格线
可以沿每个轴将网格覆盖的网格线扩展到视区边缘。
扩展网格线：
执行上述在 呈现的网页中显示网格覆盖中的步骤。
在 “网格/网格通道 ”部分 >“覆盖显示设置” 子部分中，选中“ 扩展网格线 ”复选框：
网格覆盖
在 “元素” 工具的“ 布局 ”选项卡 (“ 样式 ”选项卡) 分组，“ 网格/网格通道覆盖 ”部分包含具有 CSS 网格的元素列表。 每个网格都有复选框以及各种选项。
启用多个网格的覆盖视图
启用多个网格的覆盖视图：
执行上述在 呈现的网页中显示网格覆盖中的步骤。
在 “网格/网格通道 ”部分“ >网格/网格通道覆盖 ”子部分中，选中多个网格的每个名称旁边的复选框：
将为每个具有 CSS 网格的选定元素显示 CSS 网格覆盖。 在上面的示例中，启用了三个网格覆盖。 每个 CSS 网格在呈现的网页中都有不同的颜色：
-
body- 黄金网格覆盖。 -
div.fruit-box- 粉红色网格覆盖。 -
div.snack-box- 蓝色网格覆盖。
-
自定义网格覆盖颜色
自定义网格覆盖颜色：
执行上述在 呈现的网页中显示网格覆盖中的步骤。
在 “网格/网格通道 ”部分“ >网格/网格通道覆盖” 子部分中，单击元素名称旁边的“ 选择此元素的覆盖颜色 ”框：
颜色选取器随即打开。
另请参阅：
- 使用 CSS 功能参考中的颜色选取器更改颜色。
突出显示网页和 DOM 树中的网格元素
对于具有 CSS 网格布局的任何元素，可以自动滚动到呈现网页中的 元素，并在 DOM 树中自动选择元素。
若要滚动到网页中的网格使用元素，并选择 DOM 树中的元素，
执行上述在 呈现的网页中显示网格覆盖中的步骤。
在 “网格/网格通道 ”部分“ >网格/网格通道覆盖” 子部分中，单击 “元素”面板中的“显示元素 ”， (元素名称旁边的“
) 按钮：
呈现的网页滚动到使用 CSS 网格布局的元素，并在呈现的网页中短暂突出显示该元素。
在 “元素” 工具中，DOM 树会自动滚动到元素，并选中元素。
无论选中还是清除元素的复选框，此自动滚动和突出显示都有效。
另请参阅
演示网页：
MDN：
注意
此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到，由 Jecelyn Yeen 创作。
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。