960，950栅格化方法

先说栅格化的原理，这原理能应用所有宽度的，只是960宽效果更好。

几个术语和一个公式

一个标准的栅格系统，包括以下部分：



将Flowline的总宽度标记为W, Column的宽度标记为c, Gutter宽度标记为g, Margin的宽度标记为m, Column的个数标记为N, 我们可以得到以下公式：

W = c * N + g * (N - 1) + 2 * m

一般来说，Gutter的宽度是Margin的两倍（g=2m代入下面），上面的公式可以简化为：

W   = c * N + g * (N - 1) + g
= (c + g) * N    这个记住就行了
960 = (列宽+槽宽（2列之间的间隔）） × 列数    //960的宽度

将c+g标记为C, 公式变得非常简单：

W = C * N

简答来说：

总宽度 = (列宽+槽宽（2列之间的间隔）） × 列数

960栅格化

960删格化就是根据上面公式：

960 = (列宽+槽宽（2列之间的间隔）） × 列数

950的来历

具体应用时，Margin其实是一个空白边，从视觉上看并不属于总宽度。不少栅格设计里习惯性地设定Gutter为10px, 这样Margin就是5px. 当W为960，分割成6列时，栅格如下图：



上图的处理是左右Margin各为5px. 也可以将Margin集中放在一边，比如右边：




无论Margin放在何处（这margin删除不影响设计），我们真正要关注的是去除Margin之后950宽，因为margin删除了，公式随着改变

950 = (列宽+槽宽（2列之间的间隔）） × 列数 - 槽宽

950 = (c + g) * N - g
这是g一般是10
所以又回归成960了
950+10 = 960=(c + g) * N