发现 CSS 网格

当页面上的 HTML 元素已 display: grid 或 display: inline-grid 应用于该元素时， 元素 工具中旁边会显示一个 grid 锁屏提醒：

单击锁屏提醒可切换页面上网格覆盖的显示。 覆盖层显示在 元素上，布局类似于网格，以显示网格线和轨迹的位置：

打开 “布局 ”窗格。 当网格包含在页面上时， “布局 ”窗格包括一个 网格 部分，其中包含许多用于查看网格的选项。

“ 布局 ”窗格中的“ 网格 ”部分包含以下 2 个子部分：

覆盖显示设置

在“ 布局 ”选项卡的“可展开 网格 ”部分中， “覆盖显示设置” 部分包含以下 UI。

从下拉列表中选择以下选项之一：

在下拉列表中，选择“ 显示行号 ”以显示默认选中的每个网格覆盖 () 的行号。

默认情况下，正行号和负行号显示在网格覆盖上。

有关网格覆盖中负数的详细信息，请参阅 CSS Grid 的基于行的位置 。

在下拉列表中，选择“ 显示行名 ”以查看行名而不是数字;如果提供了名称，则将显示每个网格覆盖的行的名称。 在此示例中，4 行具有名称： left 、 middle1 、 middle2 和 right 。

有关网格覆盖中线条名称的详细信息，请参阅 使用命名网格线进行布局 。

选中 “覆盖显示设置” 部分中的任意复选框：

“ 网格覆盖 ”部分包含页面上存在的网格列表，每个网格都有一个复选框，以及各种选项。

启用多个网格的覆盖视图

若要显示多个网格的覆盖网格，请选中网格的每个名称旁边的复选框。 在此示例中，启用了 2 个网格覆盖，每个覆盖都以不同的颜色表示：

自定义网格覆盖颜色

若要打开颜色选取器并自定义网格覆盖颜色，请单击网格覆盖的名称旁边的框：

突出显示网格

若要突出显示 “元素” 工具中的 HTML 元素并在网页上滚动到该元素，请单击“ 元素”面板中的“显示元素” (“ ) 图标。

此页面的部分内容是基于 Google 创建和 共享 的工作进行的修改，并根据 Creative Commons 署名 4.0 国际许可 中所述的条款使用。 原始页面 在此处 找到，由 Jecelyn Yeen (开发人员大使 Chrome DevTools) 创作。

此作品在 Creative Commons 署名 4.0 国际许可下获得许可 。