我们花了很长的一段时间和多篇文章的篇幅和大家一起探讨了 CSS 网格布局模块的特性。从前面这些内容，不难发现网格布局的复杂性，灵活性。我想大家也意识到了，CSS Grid到来之后，Web中设计布局的方法也已经改变了。我们可以在纸上绘制布局草图，思考布局设计的全部内容。当你开始敲击代码的时候，就已经知道布局会是什么样子。

正因为CSS Grid布局的复杂性，再加上网格容器上定义的网格是不可见的。为此我们不得不考虑，如何更轻易的使用网格，或者碰到网格布局相关的 Bug，又应如何来调试。熟悉 Web 开发的同学都知道，在调试布局或CSS相关的问题时，喜欢在元素上添加一个边框。在网格布局中，虽然可以使用类似的方法在网格容器和网格项目中添加边框，帮助我们快速的定位；但是我们没法给网格线添加边框。

在 CSS Grid 布局中，网格线是非常重要的，很多时候我们都是通过网格线的数字编号或显式网格线名称来放置网格项目。

不过庆幸的是，目前主流的浏览器，比如 Chrome、Firefox、Safari 和 Microsoft Edge 浏览器的开发者工具（DevTools）都提供了网格布局审查器。有了这些工具之后，可以快速的帮助我们使用网格，调试使用网格碰到的问题。

网格布局审查器的简史

早在2016年9月@Jen Simmons 在 Twitter 上发了第一条有关于网格布局审查器（Grid Inspector Tool）信息：

但 Mozilla 团队从 2015 年 7 月就已经开始讨论开发网格审查器了。@Matt Claypotch 和 @Jen Simmons 曾致力于开发一个名为 CSS Grid Inspector（网格审查器）的 Firefox 插件，而且该插件于 2016 年 4 月就发布了。它给了团队一些工作代码的基础，以及从更大的开发者群体中收集网格审查器使用的反馈。

尽管其他浏览器，如 Chrome 和 Internet Explorer，当时都有各自的网格实现，Chrome的网格是在一个标记后面，而 Internet Explorer使用的是原始规范，但Firefox是唯一一个正在开发网格开发工具和网格实现本身的浏览器。

Mozilla 团队对网格审查器工具的深入讨论涵盖了一些功能，如在同一页面的不同网格有不同的颜色、检测网格沟槽、显式网格线编号等等。这是Firefox浏览器中网格审查器工具在最新的 Nightly 中拥有更多高级的功能，也是该团队一年多来一直在思考和努力的功能之一。它们被统统实现在一个独立的布局面板中（Layout），其中还包括对所选 HTML 元素的盒模型的渲染，以及与盒模型相关的CSS属性。

现在我们对CSS网格审查器发展历史有了一定的了解，我们开始来看看这几个主流浏览器的网格审查器有何差异以及如何使用。

现代浏览器版本迭代更新都很快，每个版本都会有新的功能，也包括开发者工具。接下来的内容都是基于当前编写文章时版本：Google Chrome（版本 92.0.4515.159）、Safari Technology Preview（Release 131，Safari 15.0）、Firefox（版本92.0）和 Microsoft Edge（版本 93.0.961.38）。对应的电脑系统是 macOS Big Sur（版本 11.5.2）。目前为止，Safari还不支持！

网格审查器的使用

为了更好的向大家演示浏览器的网格审查器的使用，先创建一个简单的网格布局：

<!-- HTML -->
<div class="grid__container">
    <div class="grid__item"></div>
    <!-- 此处省略8个 -->
    <div class="grid__item"></div>
</div>

/* CSS */
.grid__container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(100px, auto));
    gap: