随着 CSS Grid 在这个春天跨浏览器发布（Firefox 52、Chrome 57 和 Safari 10.1 中已实现。更新：Safari 10.1 随着 iOS 10.3 和 macOS Sierra 10.12.4 的发布在 3 月份发布），Mozilla 的团队希望展示一些关键功能，并让我们的内部设计师和开发者在 mozilla.org 上尝试这项技术。结果是一个 实时演示网站，展示了 CSS Grid 的功能，并提供了指向我们最喜欢的资源的链接。此外，mozilla.org 网页开发人员通过使用 Grid 从头开始构建网站获得了实际操作经验。

事实证明，网络上提供的资源，包括大量示例和说明，在清楚地解释基本知识方面做得非常好，以至于他们能够深入研究并构建网站而无需任何指导。 Jen Simmons 和 Rachel Andrew 都提供了有关如何开始使用网格的出色示例和教程。此外，MDN 包含多个关于使用 CSS 网格的详细指南。

在设计这个项目时，我们牢记以下目标

• 向开发者和设计师展示 CSS Grid 的潜力。
• 介绍 Firefox 开发者工具 Grid Inspector，它目前是唯一用于网格的浏览器内开发工具。
• 在 mozilla.org 上构建一个使用网格布局的页面。
• 证明 CSS Grid 使任何了解 CSS 的人都能轻松掌握基础知识并创建一个功能页面。（奖励：Mozilla 网页开发团队在过程中玩得很开心！）

Grid 提供了强大的布局功能，在演示网站上，我们希望说明一些关键功能。这个列表并不详尽，但确实展示了一些现在可用的非常有趣的功能。

• 固定或灵活的网格：您可以使用固定 轨道 大小或使用百分比或 新的 fr 分数单位 创建灵活大小的网格。
• 放置和对齐项目：您可以使用标准 网格属性 或使用 网格模板区域 将项目放置在网格上的精确位置。项目可以独立于其 HTML 源代码顺序放置。 对齐 功能控制项目放置到网格区域时的对齐方式，以及整个网格的对齐方式。
• 控制重叠：网格单元格可以包含多个项目，并且可以 跨越 多行和多列。您还可以使用 z-index 进行分层。

此外，我们希望展示 Firefox 的 Grid Inspector 工具，它允许您在创建布局或研究 CSS Grid 在行动中的其他示例时，在浏览器中看到网格线。

请查看演示网站，并告诉我们您的想法。我们希望它能帮助您学习并激发您开始使用 CSS Grid。敬请关注更多有关 CSS Grid 的内容以及如何使用它，请查看这里和 MDN。