开发者工具提示：如何检查 CSS 网格

Sofia Emelianova

Chrome 开发者工具提供多种可视化选项，可直观地调试 CSS 网格布局。

观看视频，了解如何在元素面板中切换网格叠加层，以及如何使用该叠加层：

• 直观呈现和检查网格布局。
• 查看行和列编号，以便在放置网格项时参考。
• 如果网格项很多且数字令人困惑，请使用线条和区域名称，并在叠加层上查看这些名称。
• 检查轨道大小。

此外，在元素 > 样式窗格中，借助网格编辑器，您只需点击按钮，即可在网格布局中对齐项及其内容，而无需输入 CSS 规则。

如需获得更多实操学习体验，请按照检查 CSS 网格教程操作。