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