Sofia Emelianova
Chrome 开发者工具通过各种可视化选项，直观地调试 CSS 网格布局。
观看视频，了解如何在 Elements 面板中开启/关闭网格叠加层，以及如何使用它执行以下操作：
- 直观呈现和检查网格布局。
- 查看放置网格项时参考的行和列号。
- 如果您有很多网格项且数字令人困惑，请使用线条和区域名称，并在叠加层上看到这些名称。
- 检查轨道大小。
此外，借助元素 > 样式窗格中的网格编辑器，您只需点击一下按钮，即可在网格布局中对齐各项内容及其内容，而无需输入 CSS 规则。
如需获得更多实操学习体验，请参阅检查 CSS 网格教程。