推出 CSS 网格检查器
CSS Grid Layout 是一种网络标准布局系统，用于在 CSS 中定义行和列的网格结构。然后可以将 HTML 元素分配到生成的网格单元格中，以实现灵活且可预测的布局。
这个布局系统功能强大，但使用它需要摆脱过去的思维模型。当网格定义本身不可见（只有其对项目放置的影响可见）时，你很容易迷失和困惑，不明白为什么布局没有按预期工作。
当您可以在页面上看到网格的结构及其在上下文中的效果时，使用 CSS Grid Layout 会变得更易于理解和推理。
CSS 网格检查器是 Web 检查器中的一个新工具，可帮助您可视化使用 CSS 网格布局语法定义的网格，并验证元素是否按预期定位。它在 Safari 技术预览版 123 中推出。
可视化网格
CSS 网格检查器在作为 CSS 网格容器的 HTML 元素上方显示一个页面叠加层。当元素的 display CSS 属性值为 grid 或 inline-grid 时，该元素就是 CSS 网格容器。
您可以通过两种方式为 CSS 网格容器打开叠加层：
- 点击元素选项卡 DOM 树大纲中元素旁边显示的“网格”徽章。
- 打开元素选项卡详细信息侧边栏中的新布局面板，然后点击网格叠加层列表中相应元素旁边的复选框。
叠加层可以显示：
- 定义网格行和列的线条（即网格轨道）
- 网格轨道之间的间距（即网格间隙）
- 行号和网格轨道大小的标签
- 网格线名称和网格区域名称的标签
配置 CSS 网格检查器叠加层
CSS 网格检查器叠加层可以根据使用的 CSS 属性显示网格组件的许多属性。一次性显示所有内容可能会令人不知所措。根据您的工作流程，您可能希望全部或只显示一部分。
使用布局面板中“页面叠加选项”部分的设置来配置叠加层显示细节的级别。更改会立即应用并保存在 Web 检查器会话中。
您可以切换以下选项：
- 轨道大小：显示一个标签，其中包含轨道大小的用户编写值，如果未明确设置，则为自动。这有助于通过将 CSS 中设置的用户编写值与页面上相应的网格轨道匹配来进行视觉检查。
- 行号：显示一个标签，其中包含显式网格线的序数和逆序数。当从末尾向后引用线条时，逆序数很有用。例如，1 -4 表示“第一个和倒数第四个”。
- 行名称：显示一个标签，其中包含网格线的用户定义名称或从网格区域名称派生的隐式网格线名称。如果未定义，则不执行任何操作。在 MDN 上了解更多关于隐式网格线名称的信息。
- 区域名称：显示一个标签，其中包含一组单元格的用户定义名称。如果未定义，则不执行任何操作。
- 扩展网格线：将网格线无限地沿其各自方向延伸。这对于检查与页面上其他元素的对齐非常有用。
要更改叠加层颜色，请使用布局侧边栏面板中网格叠加层列表中相应元素旁边的颜色样本。新颜色将保存用于该页面上的该元素，并记住在 Web 检查器会话之间。当您稍后返回检查同一元素时，叠加层将使用您选择的颜色。
试一试
如果您正在使用 Safari 技术预览版 123 或更高版本，您可以检查以下示例，在本页面上试用 CSS 网格检查器。打开 Web 检查器，转到元素选项卡，切换到布局侧边栏面板，然后为标记为 div#css-grid-demo 的元素切换网格叠加层。
如果您遇到任何问题，请在 webkit.org/new-inspector-bug 提交报告。
如果您想分享反馈或想法，请在 Twitter 上发送给我们：@webkit。