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

Sofia Emelianova

GitHub

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

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

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

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

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