在过去的几周里，我开始看到基于CSSGrid的布局框架和网格系统出现。我们很惊讶它来得这么晚。但是除了使用CSSGrid来栅格化布局之外，我还没有看到任何框架提供其他有价值的东西。他们痴迷于模仿过去的做法，而不是着眼于未来。这使得发展受到限制。一个常见的问题是这些框架仍然需要标记语言中的行包装器。为什么网格不同？网格是一个网格系统。它允许您在CSS中定义列和行，而无需在标记语言中定义它们。您不需要其他工具来帮助您实现看起来像光栅的效果，它就是光栅！设置布局的传统方法需要使用行包装标记的原因是我们通过为对象分配宽度来伪造网格。然后我们通过调整对象布局在网格之间创建间隙。在基于浮动的网格布局中，需要将每一行元素包裹起来，并清除浮动，使下一行的内容不浮动。在基于flex的网格中，需要为每一行定义新的flex容器，或者需要适当灵活地使用wrapper、flex-basis和margin来达到同样的效果。Grid不需要这些行包装器，因为您已经定义了相应的行轨道和对齐线。并且不存在网格内容溢出到其他行的危险。如果您定义行包装器，每一行都会成为一个新的一维网格布局。如果你将自己局限于一维，那么使用Grid并不比Flexbox好。基于Grid的布局框架有什么值得学习的地方？Framework在这里不是正确的词，但我认为一组Sass助手可以帮助标准化团队中Grid的使用。如果你探索过相关规范，你会发现有很多不同的方法可以达到同样的效果。您可以使用行号或行名命名范围。您可能更喜欢显式定位所有元素，或尽可能依赖自动布局。如果团队中的每个人都使用不同的方法，您最终会编写出难以阅读和维护的代码。代码向后兼容也是如此。如果您已经决定如何处理不支持网格布局的浏览器，某些工具可以帮助您确保您的决定在不同的地方转化为相同的效果。此外，这种方法在项目开发层面比直接导入其他公司的方法更有用。在开始使用新的“网格布局框架”之前，请确保您首先了解网格布局的工作原理。知道为什么要创建抽象，它提供什么以及使用它的副作用是什么。拥抱新的可能性我刚从模式日回来，我的一张幻灯片在Twitter上被提到了几次：“Flexbox与Grid非常不同。如果你首先使用旧的方法进行开发，那么你就失去了用Flexbox和Grid进行创新。”上面这张PPT的背景是处理老版本浏览器，也就是处理浏览器兼容性问题。我鼓励人们首先考虑新的浏览器。要开始使用良好的标记，首先要为那些支持Grid和Flexbox等的浏览器进行设计。如果您从旧版本的浏览器开始，它们的性能将成为您能力的限制因素。创建规范标记并整理不必要的过时元素。使用网格和其他新方法来设计您的网站。然后，您可以通过提供更简单的方法来解决不支持新功能的浏览器的兼容性问题。也许您的Grid布局设计使用了交叉行等设计方案。这种效果在不支持附加标记方法的旧版浏览器中很难实现准确的布局。您可以使用flexbox实现向后兼容性并创建没有交叉线的布局。它不是那么整洁，但它非常好用，并且不需要为越来越少的用户添加额外的标志。您可以单击此处查看相关示例。这是我在GridbyExample上发布的具有向后兼容性方案的几种模式之一。如果你把自己局限在过去，比如在旧浏览器中只使用Grid的部分特性，或者使用本身受限的框架，那么你在使用Grid时就失去了发挥创意的可能。那么为什么要使用网格呢？您也可以只使用旧的代码方案，但这很遗憾。如果您在寻找网格框架时发现了这篇文章，那么您来对地方了！学习并使用CSSGrid布局，也许你不需要再找其他资料了。原文地址：你不需要一个基于CSSGrid的网格系统原作者：RachelAndrew欢迎大家在评论区留下你的想法和感受！欢迎大家关注知乎专栏：全栈成长之路文章保质保量(づ￣3￣)づ╭?～也欢迎大家加入学习交流Q群：637481811
