开发者工具提示:如何检查 CSS 网格
bookmark_borderbookmark
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
Chrome 开发者工具提供多种可视化选项,可直观地调试 CSS 网格布局。
观看视频,了解如何在元素面板中切换网格叠加层,以及如何使用网格叠加层:

- 直观呈现和检查网格布局。
- 查看行和列编号,以便在放置网格项时参考。
- 如果网格项很多且数字令人困惑,请使用线条和区域名称,并在叠加层上查看这些名称。
- 检查轨道大小。
此外,在元素 > 样式窗格中,借助网格编辑器,您只需点击按钮,即可在网格布局中对齐项及其内容,而无需输入 CSS 规则。

如需获得更多实操学习体验,请按照检查 CSS 网格教程操作。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2022-08-18。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2022-08-18。"],[],[]]