CSS Grid 正在彻底改变 网页设计。它是一个灵活的、简单的设计标准，可在所有浏览器和设备上使用。设计师和开发人员迅速爱上了它，我们也是。因此，我们一直在努力改进 Firefox 开发者工具布局面板，为 CSS Grid 检查器和盒模型添加强大的升级。最新的改进现已在 Firefox Nightly 中提供。

布局面板改进

新的布局面板列出了页面上所有可用的 CSS Grid 容器，并包含一个叠加层来帮助您可视化网格本身。现在，您可以自定义叠加层上显示的信息，包括网格线编号和尺寸。

如果您仍然在学习 CSS Grid 及其工作原理，这将特别有用。

侧边栏中还有一个新的交互式网格轮廓。将鼠标悬停在轮廓上以突出显示页面上的网格部分，并显示尺寸、区域和位置信息。

新的“显示网格区域”设置将显示每个单元格的边界区域和关联的区域名称。此功能的灵感来自 CSS Grid 模板构建器，该构建器由 Anthony Dugois 创建。

最后，Grid 检查器能够可视化应用于网格容器的转换。这使开发人员能够准确地看到其网格线在页面上的位置，适用于已平移、倾斜、旋转或缩放的任何网格。

改进的盒模型面板

我们还添加了一个盒模型属性组件，该组件列出了影响所选元素位置、大小和几何形状的属性。此外，您还将能够看到并编辑顶部/左侧/底部/右侧位置和高度/宽度属性，使实时布局调整变得快速而轻松。

最后，您还将能够看到任何定位元素的偏移父元素，这对快速查找嵌套元素非常有用。

与往常一样，我们想听听您喜欢或不喜欢什么，以及我们如何改进 Firefox Dev Tools。在 Discourse 上找到我们，或在 Twitter 上关注 @firefoxdevtools。

感谢社区

许多人在 Nightly 中发布 CSS 布局面板方面发挥了重要作用，尤其是 Firefox 开发者工具和开发者关系团队。感谢他们为使 Firefox 变得很棒所做的一切贡献。

我们还从社区中的优秀人士那里获得了大量帮助，以及来自 本科生顶峰开源项目 (UCOSP) 和 谷歌夏季代码 (GSoC) 等项目的参与者。非常感谢所有帮助在本版本中实现功能的贡献者，包括

Micah Tigley - 莱斯布里奇大学 计算机科学专业的学生，2017 年冬季 UCOSP 学生，2017 年夏季 GSoC 学生。Micah 实现了交互式网格轮廓和网格区域显示。

Alex Lockhart - 达尔豪西大学 学生，2017 年冬季 UCOSP 学生。Alex 为盒模型面板做出了贡献，包括盒模型属性和位置信息。

Sheldon Roddick - 汤普森河大学 的学生，2017 年冬季 UCOSP 学生。Sheldon 做出了快速贡献，添加了在盒模型中编辑宽度和高度的功能。

如果您想成为 Firefox Dev Tools 的贡献者，请在 GitHub 或 Slack 或 irc.mozilla.com 上的 #devtools 联系我们。在这里，您将找到开始所需的所有资源。