在过去的几个星期里，我开始看到基于 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