如何使用 Chrome 开发者工具调试 CSS 网格

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

1. 简介

现在,开发者工具可以更好地支持 CSS 网格调试

CSS 网格

如果网页上的某个 HTML 元素应用了 display: griddisplay: inline-grid“元素”面板会提供诸多选项来帮助您更好地检查网格。

学习内容

在此 Codelab 中,您将学习如何使用 Chrome 开发者工具调试 CSS 网格。

  • 如何在“元素”面板中开启/关闭网格调试功能
  • 如何在“布局”窗格中自定义网格叠加层设置
  • 如何借助网格叠加层修改样式

所需条件

  • 一台可正常运行的计算机和稳定的 Wi-Fi 连接
  • Chrome 87 或更高版本。
  • [可选] 对 CSS 网格有基本的了解。

操作内容

您将借助 CSS 网格调试工具来解开此谜题。

Chrome 谜题

2. 开始

点击下面的链接,打开谜题网页:

然后,在谜题网页上打开 Chrome 开发者工具

3. 启用网格叠加层

元素面板中检查谜题。点击并聚焦于谜题容器节点:

<div class="chrome-puzzle">

请注意,在元素面板中,谜题容器旁边有一个 grid 标记。点击该标记即可开启/关闭网格叠加层。

此视频演示了如何完成上述步骤。

4. 自定义网格叠加层显示方式

目前,网格叠加层会与网格线编号一起显示。我们来进一步自定义显示方式,以便解开谜题。

点击布局窗格,从下拉菜单中选择隐藏网格线标签,即可隐藏网格叠加层上的网格线编号。

现在,转到样式窗格并检查谜题容器 CSS。它包含一个 grid-template-areas 属性:

.chrome-puzzle {
  grid-template-areas:
    "top-left top-right"
    "bottom-left bottom-right";
}

区域名称有助于我们解开谜题!我们来更新相关设置,以便在屏幕上显示这些内容。

返回到布局窗格,选中显示区域名称复选框。

搞定!网格叠加层现在会显示各个拼图块的区域名称。

此视频演示了如何完成上述步骤。

5. 解开谜题

屏幕上显示区域名称后,我们就可以开始解开谜题了。

我们来将每个拼图块放置到正确的区域。

我们可以先检查第一个拼图块。

<img src="...-grid-4.png" class="piece-4">

样式窗格中,找到这个拼图块的 CSS 类:

.piece-4 {
    grid-area: auto;
}

grid-area 当前设为 auto。您可以使用正确的区域名称进行更新。

这个拼图块应属于哪个区域?倘若这个拼图块的正确区域是 top-right,您便可将值 auto 替换为 top-right。立即直观呈现相应更改。这个拼图块现已放入 top-right 区域中。

此视频演示了如何完成上述步骤。

更新每个拼图块的 grid-area,直到解开谜题!

解开后的谜题

6. 恭喜!

恭喜!您已成功完成此 Codelab!

如果您想详细了解 CSS 网格调试工具,请参阅此文档

您觉得此 Codelab 怎么样?

不行,太无聊了。 很好,我喜欢!