Mozilla.org用CSS Grid小试身手

最近，各大浏览器终于将兼容 CSS Grid 了（Firefox 52 和 Chrome 57 已开始提供支持，Edge 也有此计划）。Mozilla 团队想借此文展现一下CSS Grid 的几大特性，并让 Mozilla 自己的设计与开发人员也在 mozilla.org 官网上实验这个技术。于是，Mozilla 建立了在线示范的网站来呈现 Grid 的特点和功能，并且提供一些有用的资源。因为 mozilla.org 的网页开发者是用 Grid 从零开始打造这个网站的，所以他们也得到了宝贵的实践经验。

整个网页（包括页面上方的图像）都是以 CSS Grid 制作的。

网络上本来就已经有取之不尽的范例和说明，这些资源足以帮助开发者们了解 CSS Grid 的基本概念，所以可以很轻松地开始编排网页。例如，Mozilla的开发人员Jen Simmons 和 Rachel Andrews就提供了好用的 Grid 实例和课程，MDN 上也找得到 CSS Grid 的详细操作说明。

在设计这个网页时，Mozilla 的目标是：

• 向开发和设计人员展现 CSS Grid 的潜力；
• 将目前唯一一个内建于浏览器的 Grid 开发者工具——Firefox Developer Tools: Grid Inspector 介绍给大家认识；
• 在 Mozilla.org 上架一个以 Grid Layout 编排而成的网页；
• 证明任何人只要掌握了 CSS 的基本原则，就能轻松使用 CSS Grid 来编排网页。
  

Grid 具备强大的版面布局功能。Mozilla希望能通过此示范网站展示其几大功能特性。以下是几个目前已经上线的功能，但除了这几项以外，还有许多非常有趣的功能供大家挑选。

• 固定或弹性网格：你可使用固定大小的网格轨道（track），或是以百分比或新的 fr 分数单元来弹性设定网格的尺寸
• 不同元素的定位（Place）& 排列（Align）：你可采用标准的网格属性（grid properties）或网格模板区域（template area），精确地定位网页上的各个元素，而不必受制于其在 HTML 来源上的顺序。通过排列的功能，你可以在把元素放入网格区域时调整其排列方式，以及调整整个网格的垂直及水平位置。
• 重叠元素的编排：一个网格的单元格（grid cell）能容纳一个以上的元素，或同时跨越好几行和好几列。你也能以 z-index 调整重叠元素的配置方式。
  

此外，开发人员们还想在示范网站上用 Firefox 的GridInspector 工具来炫技。此工具能让你在编排版面或研究其他以 CSS Grid 布局的范例时，直接在浏览器上查看网格的网格线。

在展示网页上使用 Firefox Grid Inspector

欢迎访问此示范网站，并反馈您的想法或建议。通过这样的交流，Mozilla 希望能帮您学会并开始使用 CSS Grid。

除了本文以外，负责设计此示范网站的前端开发人员也将会写相关的文章，与大家分享他们的 CSS Grid 初体验！

英文原文

杰出的mozilla总是在改善用户的体验！

语法好复杂呀

支持支持！！！前端开发神器