震惊！很多人都不知道 CSS Grid 框架早就有了！

前言

写作本文起源于知乎的一个问题:【CSS Grid 布局那么好，为什么至今没有人开发出基于 Grid 布局的前端框架呢？】

这篇文章拖沓了两个月，是因为真的不知道从哪里说好。这个问题的所有回答几乎都没有切中问题的本质，而且对 CSS Grid 也有很深的误解。另外这个问题的描述可能不太恰当，因为基于 CSS Grid 的框架已经有了。感兴趣的朋友可以了解一下 Flex-Layout，它是一个基于指令布局的神器。大家不要被项目名误导，虽然叫 flex-layout，其实有 flex 和 grid 两种指令。

我觉得这个问题更恰当的描述应该是【为什么没有基于 Grid 布局的纯 CSS 前端框架呢】，基于 Float 和 Flex 的 CSS 布局框架多如牛毛，但是一直没看到基于 CSS Grid 的实现。我在写 Snack 的时候也曾考虑过在 v3 版本中整合 CSS Grid，但是后来发现有些不现实，下文详述。据说 Bootstrap 也曾打算在 v5 版本整合 CSS Grid，但是目前来看依然沿用了 Flex 布局。我个人觉得基于指令实现的 flex-layout 应该是整合 CSS Grid 的最佳方式。

本文打算从相反的角度聊一聊，假如要实现一个基于 CSS Grid 的布局框架，我们会遇到哪些问题呢？

浏览器兼容性

先说一下兼容性，很多人总觉得 CSS Grid 的兼容性不行。其实不然，下图的统计数据能够看出大部分浏览器对 CSS Grid 的支持还是不错的，要知道 Flex 在 IE10 上面可以使用的属性也非常有限。据统计目前 CSS Grid 使用率和 Flex 已经基本持平了。所以兼容性并不能回答开篇提出的问题。

CSS 布局框架的特点

CSS 布局主要有四种，上古时期用的是 table，这个就不说了，我们只讨论新世纪常用的 Float、Flex、Grid。这三种布局方式就是递进的关系，逐步加强了 CSS 布局的便利性。CSS 布局的最佳实践当属 Bootstrap，其中 Float 和 Flex 布局方案都已经被 Bootstrap 实现，唯独 Grid 方案迟迟不见踪影。

CSS 布局框架的关键在于如何设计栅格，我们先看看在 Bootstrap 中是怎么进行布局的。

<div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> </div> <div> <div>.col-md-8</div> <div>.col-md-4</div> </div> <div> <div>.col-md-4</div> <div>.col-md-4</div> <div>.col-md-4</div> </div> <div> <div>.col-md-6</div> <div>.col-md-6</div> </div>

用过 Bootstrap 的人对以上结构一定不陌生。在 Bootstrap v4 中，由于 Flex 布局功能的增强，row 也可以搭配 utility 使用。

<div> <div>One of three columns</div> <div>One of three columns</div> <div>One of three columns</div> </div> <div> <div>One of three columns</div> <div>One of three columns</div> <div>One of three columns</div> </div> <div> <div>One of three columns</div> <div>One of three columns</div> <div>One of three columns</div> </div>

row 和 col 的组合几乎已经成为栅格布局的共识和标准。接下来我们就用这种设计方式手撕一个 Grid 栅格看看效果。

手撕 CSS 布局栅格

其实手撕一个 CSS 布局栅格并不难，关键是要熟悉预处理器的循环功能。下面我们分别用 Float、Flex 及 Grid 实现一个简化版的栅格布局并对比一下它们之间的差异。

Float

Float 是过去实现流体布局的唯一方式，难点在于处理父元素的塌陷，这算是一个老生常谈的问题了，本文不再赘述。以下是一个简易版的 Float 栅格：

See the Pen float-columns by Zongbin (@nzbin) on CodePen.

这种栅格简单实用，堪称经典。但是 Float 布局的局限性很大，如果栅格的高度不相同（比如将第一个栅格的高度加高），布局就会出现塌陷。

Flex