如果没有了解栅格系统是什么，建议 看完这篇文章 以后再回来。

其实有很种 CSS 写法实现栅格系统，很多 CSS 库也都会提供类似的栅格系统实现（譬如： YUI ， BluePrint ）。

引用 One True Layout 文中所言，良好的布局应该具有的几个特性：

1. 具有一定的灵活性
2. 等高
3. 基于栅格

请允许我「重复造了轮子」，我的栅格系统实现是基于 「伪绝对定位布局」 ，这样可以更好的实现上述所言的几个特征（很难解释，还是直接看 DEMO ）。

http://friable.rocks/grids/index.html 定义的 950px 宽度为公式 W ）

column-24 start-01

因为是上述「伪绝对定位」的布局，所以相应列之间不会相互影响。而理解上述布局可能需要些时间，同时感谢师兄那么详细的讲解，我相信也会给你带来收获。

另， 感谢 Missx 提供栅格标准

1. 黄金分割标准：右边的大小一般是左边大小的黄金比例
2. 平分：在1024的分辨率下，一般采用330左右的分割
3. 两栏分割：左边660 右边260左右
4. 三栏分割：左边是200左右 中间400左右 右边300左右
5. 三栏分割：右边两栏之和是左边的0.618
6. 三栏分割：中间180 两边分别为380左右

很难具体的解释其中的细节，但是希望有问题的朋友能够留言，我尽量帮你解答。