你不须要基于 CSS Grid 的栅格布局系统

在过去的几个星期里，我开始看到基于 CSS Grid 的布局框架和栅格系统的出现。咱们惊讶它为何出现的这么晚。但除了使用 CSS Grid 栅格化布局，我至今尚未看到任何框架能提供其余有价值的东西。他们沉醉于模仿过去的作法，而不是着眼于将来。这使得发展受到限制。其中一个常见的问题就是，这些框架仍须要在标记语言中使用行包装器。

为何 Grid 有些不一样？

Grid 是一个栅格系统。它容许你在 CSS 中定义列和行，而不须要在标记语言中定义它们。你不须要其余工具帮助你实现一个看起来像栅格的效果，实际上它就是栅格！

传统的设置布局的方法须要使用行包装器进行标记的缘由是，咱们是经过为对象分配宽度的方式来伪造网格的。而后咱们经过调整对象布局，从而在网格间制造出间隙。在一个基于 float 的网格布局中，你须要将每行元素包装起来并清除浮动，以使下一行中的内容不浮动。在一个基于 Flex 的网格中，须要你对每行定义新的 Flex 容器，或者你须要恰当灵活地使用包装器，flex-basis 和 margin 来得到相同的效果。

Grid 不须要这些行包装器，由于你已经定义了相应的行轨迹和用于对齐的线条。且不会有网格内的内容溢出到其余行的危险。 若是你定义了行包装器，那么每一行都将成为一个新的一维网格布局。若是你将本身限制在一个维度上，那使用 Grid 并无比 Flexbox 更好。

基于 Grid 的布局框架有什么值得借鉴的地方？

框架这个词在这不是太恰当，可是我认为在一个团队中，一套 Sass helper 在规范化使用 Grid 方面是颇有帮助的。若是你已经探究了相关的规范，你会发现要实现相同效果，会有不少种不一样的方法。你能够命名区域，使用行号或行名。你可能倾向于明确给出全部元素的位置，或是尽量依赖于自动布局。若是团队中的每一个人都使用不一样的方法，最终将使得编写出来的代码难以阅读和维护。

对于代码向后兼容也是如此。若是你已经决定如何处理不支持 Grid 布局的浏览器，某些工具能够帮助你确保你所作的决定可以在不一样的地方以相同的效果展示出来。此外，这种方法在项目开发层面上比直接导入其余公司的方法更有用。

在你开始使用新的“Grid Layout 框架”前，请确保你首先了解 Grid 网格布局的工做原理。知道你为何要建立一个抽象，它提供什么以及使用它的反作用是什么。

拥抱新的可能

我刚刚从 Patterns Day 回来，而且 个人一张幻灯片在 Twitter 上被说起了好几回：

“Flexbox 与 Grid 有很大区别。若是你先使用了旧的方法来进行开发，那你将失去使用 Flexbox 和 Grid 进行创新的可能”。

上面这张 PPT 的背景是处理老版本的浏览器，也就是处理浏览器兼容问题。我鼓励人们首先考虑新的浏览器。要开始使用良好的标记, 首先要为那些支持 Grid 和 Flexbox 等的浏览器进行设计。若是你从旧版本的浏览器开始，会让他们的性能成为限制你能力的因素。

建立规范的标记，整理那些过期了的没有必要的元素。使用 Grid 和其余新方法来设计你的网站。而后, 你能够经过提供一些更简单的东西, 来解决不支持新功能的浏览器的兼容问题。也许你的 Grid 布局设计使用了跨行等设计方案，这种效果很难在不支持额外标记方法的旧版本浏览器中实现精准的布局。你可使用 flexbox 作向后兼容，建立一个没有跨行的布局方案。虽然这样不那么整洁，但也彻底可使用，并且不须要为数量在逐渐减小的那部分用户来增长额外标记。

你能够 点击这来看相关示例。这是我发布在 Grid by Example 上的数个带有向后兼容方案的模式之一。

若是把本身限制在过去，例如在旧的浏览器中只能使用 Grid 的部分功能，或使用那些自身受限的框架，那你就会失去使用 Grid 时产生创意的可能。既然这样又何须使用 Grid？你也能够只使用旧的代码方案，但这的确很惋惜。

若是你在寻找栅格框架时找到本文，那你找对地方啦！学习并使用 CSS Grid 布局，可能你没有必要再找除此以外的材料了。

• 原文地址：You do not need a CSS Grid based Grid System
• 原文做者：Rachel Andrew

欢迎你们在评论区留下你的想法和感觉！

---

欢迎你们关注知乎专栏：全栈成长之路

文章保质保量 (づ￣3￣)づ╭?～

也欢迎你们加入学习交流QQ群：637481811

本文首发于个人 我的网站 LeviDing ，更多内容欢迎关注个人我的网站。
欢迎扫描上方二维码关注 公众号: LeviDing 订阅实时动态。