本文共 739 字，大约阅读时间需要 2 分钟。

一、概念

固定布局就是指各个部分都采用固定宽度的页面布局，如果缩放页面到窗口宽度小于页面宽度时，就会导致本部分内容不可见，必须通过滚动条的拖动才可以浏览全部内容。

二、定义列宽

一个固定列宽的栅格系统主要由3个部分组成：列（Column）、槽（Gutter）、外边距（Margin）。列的宽度决定了容器内部的宽度，槽的宽度决定了列与列之间的固定间距，外边距则表示container边界和实际内容之间的间距。

要构建栅格系统，首先要确定container的宽度和列数。

三、运用CSS实现固定列宽的栅格

固定列宽的栅格系统主要内容

• 设置容器，960gs的容器采用了960像素宽度居中的设置，需要设置width: 960px;并且左右两侧的外边距设置为auto，也可以简单地设置为margin: auto;。
• 为栅格命名，栅格命名一般采用grid（格子）或者column（列）作为前缀进行表示，数字作为后缀表示栅格的列数。
• 设置栅格的全局属性，左浮动（float: left;）属性是必需的，此外还需要设置栅格之间的宽度。960gs设置左右两侧的外边距均为10像素，也可以向Bootstrap 2一样只设置一侧的边距。
• 设置列宽，960gs采用的方式是12列栅格的宽度恰好填满容器。那么grid_1的整体宽度就是60像素，加上左右两侧的外边距为80像素。grid_n的宽度就是（80*n-20）像素。

注意：

• 有一些栅格系统，比如Bootstrap 2，它的12个单列栅格宽度之和超过了外层容器的宽度，需要在容器内多增强一层，设置margin的负值，例如.row{margin-left: -10px;}
• 对于像960gs这样完善的栅格系统，还会提供诸如偏移量、清除浮动等辅助功能。

转载地址：http://oqoy.baihongyu.com/