本指南介绍如何在 Chrome DevTools 的 Elements 面板中发现网页上的 CSS 网格、检查网格，并调试布局问题。原文截图来自两个演示页面：Fruit box 和 Snack box。
发现 CSS 网格
当网页上的 HTML 元素应用了 display: grid 或 display: inline-grid 时，Elements 面板会在元素旁显示 grid 标记。
点击标记，可以切换网页上的网格叠加层。叠加层覆盖在该元素上，以网格形式标出网格线与轨道的位置。子网格也可以通过 subgrid 标记切换叠加层。
打开 Layout 面板。如果页面包含网格，Layout 面板就会显示 Grid 部分，其中提供多种查看网格的选项。
使用 Grid Editor 对齐网格项与内容
通过点击按钮即可对齐网格项及其内容，无须手动输入 CSS 规则：
1. 在 Elements > Styles 面板中，点击 display: grid 旁的 Grid Editor 按钮。
2. 在 Grid Editor 中点击相应按钮，为网格项及其内容设置 align-* 和 justify-* CSS 属性。
3. 在视口中查看调整后的网格项与内容。
网格查看选项
Layout 面板的 Grid 部分包含两个子部分：Overlay display settings（叠加层显示设置）与 Grid overlays（网格叠加层）。下面分别介绍。
叠加层显示设置
这部分包含一个下拉菜单和一组复选框。下拉菜单选项如下：
– Hide line labels：隐藏各个网格叠加层的网格线标签。
– Show line numbers：显示网格线编号，默认选中。
– Show line names：如果网格线有名称，则显示名称。
复选框选项如下：
– Show track sizes：显示或隐藏轨道尺寸。
– Show area names：如果网格区域有名称，则显示或隐藏区域名称。
– Extend grid lines：默认只在设置了 display: grid 或 display: inline-grid 的元素内部显示网格线；启用后，网格线会沿各个轴延伸到视口边缘。
显示网格线编号
默认情况下，网格叠加层同时显示正向和负向网格线编号。
隐藏网格线标签
选择 Hide line labels 即可隐藏网格线编号。
显示网格线名称
选择 Show line names，可以显示名称而非编号。原文示例的四条网格线分别名为 left、middle1、middle2、right。
演示中的橙色元素通过 grid-column: left / right 从 left 跨到 right。显示名称后，更容易直接看出该元素的起止位置。
显示轨道尺寸
勾选 Show track sizes，可查看轨道尺寸。
DevTools 会在每个网格线标签中显示 [authored size] - [computed size]。authored size 是样式表中定义的尺寸；未定义时省略。computed size 是屏幕上的实际尺寸。
演示中的 snack-box 通过 grid-template-columns:1fr 2fr; 定义列宽，因此列标签同时显示定义尺寸和计算尺寸：1fr - 96.66px、2fr - 193.32px。
由于没有定义行尺寸，行标签只显示计算尺寸：80px 和 80px。
显示区域名称
勾选 Show area names，可显示区域名称。原文示例有三个区域：top、bottom1、bottom2。
延伸网格线
勾选 Extend grid lines，使网格线沿各个轴延伸至视口边缘。
网格叠加层
Grid overlays 列出页面中存在的网格。每个网格都有复选框和其他选项。
同时查看多个网格的叠加层
可以同时启用多个网格叠加层。原文示例同时启用了 main 与 div.snack-box，分别用不同颜色表示。
自定义叠加层颜色
点击颜色选择器，可以分别调整各个网格叠加层的颜色。
突出显示网格
点击突出显示图标，立即高亮对应 HTML 元素，将页面滚动到该元素，并在 Elements 面板中选中它。
来源与许可
作者：Jecelyn Yeen、Sofia Emelianova。原文：Inspect CSS grid layouts，页面标注最后更新于 2021-06-08 UTC。本文为中文翻译。
除另有说明外，原文内容采用 CC BY 4.0；代码示例采用 Apache 2.0。Java 是 Oracle 及其关联公司的注册商标。配图为原文官方截图，非本任务制作的界面截图。
暂无评论内容