一.网格布局
据说把栅格化布局称为网格布局更合适一些，网格给人的直观感受是纵横交织的方格子，栅（shan/zha?）格个人的感觉可能只是纵向的（如果念zha不念shan的话），事实上网格布局的应用一般只是纵向的，即固定列宽，而网格布局其实也可以固定行高，实现真正的网格
本文末尾提供好用的在线方案生成工具以及经典的960宽度24列网格示例
二.起源
1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的，重视功能性的新字体。
委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方各单位，每个方各单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。
网格布局最早是用于印刷行业的，比如报纸的排版就是严格遵循网格布局的，报纸上分为大大小小的内容块儿，但给人的总体感觉比较舒服，没有零零散散的参差感。另一方面，基于网格的严谨布局能够统一页面风格，减少不同页面给人的视觉差异
网格布局主要用于网页大量信息展示，比如门户网站的首页，看起来确实像报纸一样
三.960与网格布局
如果了解过网格布局，一定会发现960这个反复出现的数字，有的文章说960和黄金分割有关，其实不然
960宽度是市场的选择，在1024×768时代，960差不多就是全屏的宽度（严格地说应该是viewport宽度），和黄金分割没什么关系
2008年的时候有一大波960宽度的栅格布局，如下表：
| 网站 | 首页页面宽度 px |
|---|---|
| Yahoo! | 950 |
| 淘宝 | 950 |
| MySpace | 960 |
| 新浪 | 950 |
| 网易 | 960 |
| Live Search | 958 |
| 搜狐 | 950 |
| 优酷 | 960 |
| AOL | 960 |
可以预见，如果屏幕变得更宽（分辨率变得更高）的话，将出现更大宽度的网格布局
四.实现原理
总宽度（width）记为W, 列宽（column width）记为c, 列间距（column gutter）记为g, 留白（margin）记为m, 列数（column number）记为N, 可以得到以下式子：
W = c * N + g * (N - 1) + 2 * m
一般来说，Gutter的宽度是Margin的两倍（g = 2m），上面的式子可以简化为：
W = c * N + g * (N - 1) + g = (c + g) * N
令c + g = C, 式子变得非常简单：
W = C * N
经典的网格布局中，950是实际宽度（去掉左右margin），960是总宽度W，非常简单的算术式，并不神秘。最常见的24列（列宽40px列间距8px）网格，就是用这个简单式子算出来的
五.榻榻米布局
榻榻米是日本人的家具（床），是3行4列网格布局，这是一种看着很舒服的布局，比如类似于wp和win8 metro的布局
对3×4网格进行分割，可以得到3164种不同的布局，在PAD上的内容应用排版中被广泛应用
六.黄金分割
黄金分割可以归结为数学问题：对于长度为1的线段，将其分成两部分 x 和 1 – x, 使得：
x / 1 = (1 - x) / x
化为简单的二次方程：
x^2 + x - 1 = 0
正数解为：
x = (sqrt(5) - 1) / 2 ~= 0.618
黄金分割在设计中有相当高的地位，平面设计也不例外，网格布局中也可以应用黄金分割，比如经典的960宽度24列网格中，列宽40列距10，最接近黄金分割比例（363/587）的二分栏方式是9列（350） + 15列（590）
