火狐电竞这是一个用于实现此目的的简单演示打开您喜欢的代码编辑器并粘贴以下HTML和CSS代码段

　　可视输出是具有3行和3列的猫图像的网格布局如下所示

　　如前所述我们将在调试过程中使用Firefox开发人员版。 如果尚未安装请按照我将在此处演示的安装过程进行操作

　　要检查我们的项目请在Firefox浏览器中将其打开然后在屏幕上的任意位置单击Control键并单击然后选择“检查元素”以打开开发人员工具终端。

　　在页面上可视化网格容器借助Firefox Developer Edition中可用的新功能您可以在页面上可视化所有网格容器。 它还为您提供了网格本身的骨架叠加可以更好地了解元素在其中的位置。

　　哦我提到您可以自定义网格叠加了吗 好吧可以。 您可以选择在叠加层上显示不同的属性以帮助您更好地可视化和调试网格。 网格线c;区域名称尺寸和不确定的网格线是您可以切换其显示的几件事火狐电竞。

　　网格可见的网格线将帮助我们了解轨道的位置列行等都是可见的火狐动态。

　　将鼠标悬停在开发工具中的网格覆盖上将在页面上勾勒出匹配的单元格从而在调试时为您的列和行提供有吸引力的视觉表示。 它还在鼠标悬停时显示网格的不同部分的大小和位置。

　　网格检查器能够可视化应用于网格容器的转换。 例如如果我们决定将网格容器转换15度则会得到以下输出

　　这是一个非常方便的调试工具因为有时您不仅具有转换后的网格还可以转换旋转倾斜等。在这种情况下它可以准确告诉您出现错误的位置。

　　网格中的列和行统称为轨道。 轨道由开始和停止它们的行编号如上图所示。 结果具有3列的网格将在水平和垂直方向上具有4条轨道火狐电竞。

　　由网格中定义的行和列创建的大头钉称为显式轨道并在网格中由网格间隙中的粗虚线c;以将它们与隐式轨道区分开。 很难想象但是如果我们照亮猫图像的background-color并在网格上放大一点我们应该看到猫图像周围的显式轨迹

　　这意味着我们为网格显式创建了行和列。 因此目前我们在网格中拥有所有显式轨迹了解这一点的一种好方法是查看网格中的垂直和水平轨迹线c;您会注意到它们看起来都一样。 现在如果我们关闭开发工具中的行由于我们称为隐式轨道我们几乎将注意到网格显示没有任何区别。

　　现在如果您仔细观察您会发现水平轨道不再像垂直轨道那样滴答且可见它们变得更加模糊和点缀。 为什么 因为现在它们只是网格中的隐式轨道未定义。

　　Firefox开发人员工具检查器使使用CSS网格的工作变得非常简单。 您可以可视化所有网格数据调试任何出现的问题跟踪所有项目更改并检查动画。 再次值得注意的是这些功能并非在所有Firefox浏览器版本中都可用要获得这些功能您需要Firefox Nightly版本或Developer Edition。