1. 简介
现在，开发者工具可以更好地支持 CSS 网格调试！
如果网页上的某个 HTML 元素应用了 display: grid 或 display: inline-grid，“元素”面板会提供诸多选项来帮助您更好地检查网格。
学习内容
在此 Codelab 中，您将学习如何使用 Chrome 开发者工具调试 CSS 网格。
- 如何在“元素”面板中开启/关闭网格调试功能
- 如何在“布局”窗格中自定义网格叠加层设置
- 如何借助网格叠加层修改样式
所需条件
- 一台可正常运行的计算机和稳定的 Wi-Fi 连接
- Chrome 87 或更高版本。
- [可选] 对 CSS 网格有基本的了解。
操作内容
您将借助 CSS 网格调试工具来解开此谜题。
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 网格调试工具，请参阅此文档。