Flex 的诞生几乎解决了 Float 栅格的所有痛点，比如上面提到的塌陷问题。以下是一个简易版的 Flex 栅格：
See the Pen flex-columns by Zongbin (@nzbin) on CodePen.
其实在一维布局中，Flex 已经足够好用，至少在流体布局中没发现需要改进的地方，所以我们是否还有必要引入二维布局方案？
Grid重点来了！重点来了！重点来了！
Grid 是比 Flex 更高级的布局技术，所以单纯替换 Flex 实现一套栅格布局系统完全没有问题。以下是一个极其简易的 Grid 栅格，几乎和 Flex 栅格的效果没有区别。
grid-columns"> See the Pen grid-columns by Zongbin (@nzbin) on CodePen.
Grid 除了能实现 Flex 的布局之外，还可以在纵向空间对每一行进行调整（比如设置 grid-template-rows: 1fr 2fr）。另外，Grid 设置其它列数的栅格也比较容易，比如设置 10 列栅格，只需要设置 grid-template-columns: repeat(10, 1fr) 即可；如果是 Flex，则需要重新计算栅格的宽度。
上面示例中展示的 CSS Grid 的功能只是冰山一角。作为一个二维布局技术，它的属性写法非常繁杂，比如另外一个强大的功能 grid-template-areas MDN Demos。这种属性定义方式很难使用类名的叠加组合实现对应的功能。
如果只是简单地将 Flex 栅格替换成 Grid 栅格，我个人感觉意义不大，一个基于 CSS Grid 全新的栅格系统应该尽可能的发挥它所有的优势。这或许就是 CSS Grid 栅格系统迟迟没有出现的原因吧。我不知道文章写到这里是否清楚的表达了我的观点，或者说能否解答大家对于开篇问题的疑惑。接下来再看看 flex-layout 中的 Grid。
Flex-Layout 中的 Grid因为 flex-layout 是基于指令的实现，所以不像类名叠加的方式那样有很大的局限性，几乎可以发挥 CSS Grid 的全部优势。以下就是 grid-template-areas 的定义方法。
<div gdAreas.xs="header | sidebar | content | sidebar2 | footer" gdGap="1em" gdColumns.xs="none" gdAreas.sm="header header | sidebar content | sidebar2 sidebar2 | footer footer" gdColumns.sm="20%!" gdAreas.gt-sm="header header header | sidebar content sidebar2 | footer footer footer" gdColumns.gt-sm="120px auto 120px" gdGap.gt-sm="20px" [ngStyle]="{'max-width': 'auto'}" [ngStyle.gt-sm]="{'max-width': '600px'}"> <div gdArea="header">Header</div> <div gdArea="sidebar">Sidebar</div> <div gdArea="sidebar2">Sidebar 2</div> <div gdArea="content">Content <br /> More content than we had before so this column is now quite tall.</div> <div gdArea="footer">Footer</div> </div>flex-layout 无论是设计思路还是实现方式都让我顶礼膜拜，它与传统的 Bootstrap 形式的栅格有着本质区别。本文的重点不是介绍 flex-layout，如果大家感兴趣，还是看官网介绍吧 Flex-Layout。
总结酝酿了两个月个文章，感觉还是没有把自己的观点表达清楚。回到问题本身，【为什么没有基于 Grid 布局的纯 CSS 前端框架呢】，个人觉得最主要的还是传统写法无法发挥 CSS Grid 的全部优势，至少用以往的类叠加方式是无法做到的。CSS Grid 属性的特殊性也决定了不可能也不应该只是单纯的叠加类名。