页面的布局方式是页面构成的主骨架，其重要性不言而喻；
拿到一个PSD，一般情况下你会：
看整体布局方式，是列式布局还是通栏式布局？ 列式布局是2列还是3列？ 通栏式布局一共有多少个通栏？每个通栏有多少列？
那当然先要写页面的主要布局的代码，和建楼房先搭地基的道理是如出一辙滴。布局代码确定后，再开始在布局上做“填空”游戏。
布局对于设计师来说也很重要，当开发员和设计师都遵循统一的布局规范时，可以大大的降低两者的沟通成本。同时保证页面风格的统一性。
20列的组合(每列40px)，10像素间隔，实际宽度990px
20列的组合(每列30px)，20像素间隔，实际宽度980px
25列的组合(每列30px)，10像素间隔，实际宽度990px
25列的组合(每列20px)，20像素间隔，实际宽度980px
11列的组合(每列80px)，10像素间隔，实际宽度980px
18列的组合(每列35px)，20像素间隔，实际宽度970px
25列的组合(每列45px)，10像素间隔，实际宽度980px
33列的组合(每列20px)，10像素间隔，实际宽度980px
14列的组合(每列60px)，10像素间隔，实际宽度970px
14列的组合(每列50px)，20像素间隔，实际宽度960px
28列的组合(每列25px)，10像素间隔，实际宽度970px
12列的组合(每列70px)，10像素间隔，实际宽度950px
12列或16列的组合(每列60px或40px)，20像素间隔，实际宽度940px
简单栅格布局
原文：http://www.cnblogs.com/luobaojun/p/4677518.html
