Chrome Devtools 检查CSS网格

文章翻译自：https://developer.chrome.com/docs/devtools/css/grid/

本指南将向您展示如何在页面上发现 CSS 网格、检查它们并在Chrome DevTools的Elements面板中调试布局问题

本文中出现的截图中显示的示例来自这两个网页：Fruit box和Snack box

发现 CSS 网格

• 当页面上的 HTML 元素已经display: grid或display: inline-grid应用到它时，您可以grid在“Elements”面板中看到它旁边的徽章
  
• 单击旁边的徽章可以显示网格线的位置，再次点击，网格线消失
  
• 当页面上包含网格时，Layout 窗格将包含一个Grid部分，其中包含许多用于查看这些网格的选项
  
  

下面来介绍这些选项

Overlay display setting

• 一些设置，自己点点就知道啥意思了

Grid overlays

• 是这个页面出现的所有网格，可以点击前面的选择框来选择显示与否