栅格布局（Grid-Layout）

什么是栅格布局？

前端页面的搭建标准是UI设计稿, 那么设计稿来自UI设计师，栅格布局就是源自平面设计中常用的网格辅助设计。简单的说，就是把一个完整的蛋糕切成若干份小块的蛋糕，吃起来比较方便。那么问题来了，而蛋糕该切多大，切成几块呢？

常用的栅格布局有三种切割方式：12格、16格、24格，bootstrap中采用的是12格的切割方式，ant-design中采用的是24格的切割方式，国外一些网站采用的16格切割方式，可参见960gs

栅格布局的目的是为了使得网页的布局更加规范和简洁，提升用户体验，但同时也可能会限制了设计师的发挥，因此灵活运用栅格布局也成为设计师们的必备技能。

为什么是12、16、24格？

上面说到三种切蛋糕的方式，综合下来考虑有以下几个原因：

1. 目前市面上常见的pc的屏幕是1920，1440，1200 三种，仔细思考24或者16或者12都可以被三者整除，一方面是方便设计，另一方面也是为了更容易的去布局。
2. 早期很多比较著名并且结构复杂的门户网站都采用960栅格布局的策略

网站	首页页面宽度 px
Yahoo!	950
淘宝	950
MySpace	960
新浪	950
网易	960
Live Search	958
搜狐	950
优酷	960
AOL	960

虽然现在这些网站的首页宽度很多不再使用960px或950px了，但是早期的960px被认为是最佳的布局宽度。
那么又为什么是960呢？这就不得不提到标准的栅格布局这个概念了。

一个标准的栅格布局包括container, column, gutter和margin, 我们将container的总宽度记为W, 列宽度记为C(不包括槽)，列数记为N, 槽宽度记为G, 两边边距记为M,则有以下计算公式：

W = C N - (N - 1) G + 2 * M

一般来说，Gutter的宽度是Margin的两倍，上面的公式可以简化为：

W = C N + G (N - 1) + G = (C + G) * N

将C+G标记为X（即槽宽加列宽看作一格）变得非常简单：

W = X * N

具体应用时，Margin其实是一个空白边，从视觉上看并不属于总宽度。不少栅格设计里习惯性地设定Gutter为10px, 这样Margin就是5px. 当W为960，分割成6列时，栅格如下图：上图的处理是左右Margin各为5px. 也可以将Margin集中放在一边，比如右边：无论Margin放在何处（这只影响技术实现，不影响设计），我们真正要关注的是去除Margin之后的部分：这就是我们要真正关注的950！将W的含义变为去除Margin的总宽度，公式变化为：
W = N * C - G
将上面的公式实例化一下：
950 = 12 * 80 - 10
950 = 16 * 60 - 10
950 = 2
这就形成了960蛋糕的三种常见切法。
12 x 80
16 x 60
24 x 40
上面三种切法，N越大，灵活度越高。

基于以上原因，现在比较流行的两种切分方式是12和24。

栅格布局的实现方案

1. float布局（兼容ie7、8、9）
float-栅格布局
这种布局方式的优点是兼容性比较好，缺点就是需要解决父容器的塌陷问题，并且当你想要在一行容器中实现列数量超出总列数(12/24)时换行的效果，这个时候如果其中某一列的高度与其他列不一致，就会出现布局混乱的情况。因此使用过bootstrap3栅格布局的同学可能会知道，要避免这种情况的发生，最好的办法是要保持每一列的高度一致。
2. flex布局（ie10及以上）
flex-栅格布局
这种布局方式的优点就是解决了float栅格布局的缺陷，然而鱼与熊掌不可兼得，缺点就是兼容性的问题，大家都知道flex在ie10以下是不被支持的。如果你不考虑ie10以下的浏览器，那可以说是比较完美的布局方案了。
3. grid布局（ie10及以上）
grid-栅格布局
这种布局方式平时大家用的比较少，但是却引领了未来网页布局的趋势，本文中不作详细介绍，请参阅阮一峰老师Grid布局
grid布局的兼容性实际上和flex布局基本是持平的，但是比起flex来说更加的灵活和方便，可以说是目前使用栅格布局的最佳方案。

栅格布局之Gutter的精妙之处

标准的栅格布局为何需要gutter? 答案很简单，视觉和美感。试想所有列的内容全部挤在一起是多么的违和，那么gutter的实现有什么精妙之处呢？
实际的实现中我们给每一列左右padding，实现效果如下：

图中白色空格部分为gutter,看起来没什么问题，但是当我们想在第一列中插入一行（及row）

这个时候中间部分的间隔就是2倍的gutter, 但是这并不是我们想要的效果，我们想要的是一行布局中，不管添加多少列，列再嵌套行，保持gutter总是一致。
因此，我们在实现一个栅格布局的时候，必须把列（col）放在行（row）容器中，并且将row的两边margin设置为负的gutter, 这样会使得row宽度被撑大两倍的gutter。

这就是栅格布局实现的经典之处。