本帖最后由 yingliu 于 2017-4-12 14:39 编辑
最近,各大浏览器终于将兼容 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希望能通过此示范网站展示其几大功能特性。以下是几个目前已经上线的功能,但除了这几项以外,还有许多非常有趣的功能供大家挑选。
此外,开发人员们还想在示范网站上用 Firefox 的 GridInspector 工具来炫技。此工具能让你在编排版面或研究其他以 CSS Grid 布局的范例时,直接在浏览器上查看网格的网格线。
在展示网页上使用 Firefox Grid Inspector
欢迎访问此 示范网站,并反馈您的想法或建议。通过这样的交流,Mozilla 希望能帮您学会并开始使用 CSS Grid。
除了本文以外,负责设计此示范网站的前端开发人员也将会写相关的文章,与大家分享他们的 CSS Grid 初体验!
|