网页的网格化布局

网格化布局（Grid Layout）是一种页面设计方式，它将整个页面分成同等大小的若干小格，然后让各部分内容分别占用若干个小格。这样设计出来的页面，整齐有序，容易阅读。实际上，网格化布局早就在其它地方使用，最典型的例子是报纸的页面设计。虽然一张报纸的内容很多，但是拿起来看却不觉得乱，就要归功于这种布局方式。

在网格化布局中，最常见的是 960px 宽度的布局，这是因为对于现在的大部分电脑，屏幕分辨率宽度已经至少有 1024 了；而且 960 是一个有很多因子的自然数。选定了宽度后，我们可以将这个宽度分为若干列，常见的分法是分为 12 栏，这同样是因为 12 是有多个因子的数，所以容易安排内容。

现在假定我们需要让内容栏占用 8 栏，而侧栏占用 4 栏，html 中的代码如下：

<div id="wrapper">
  <div id="content" class="span8"></div>
  <div id="sidebar" class="span4"></div>
</div>

接下来我们需要在 CSS 文件中设置宽度。960px 分为 12 栏，每栏的占用的 80px。我们设定各栏之间的间隙为 16px，那么每栏的宽度就为 64 px。这样 8 栏的宽度为 8 x 80 - 16 = 624，而 4 栏的宽度为 4 x 80 - 16 = 304。因此 CSS 文件可以这样写：

.span4, .span8 {
  margin-right: 16px;
  float: left;
}

.span4 {
  width: 304px;
}

.span8 {
  width: 624px;
}　

参考资料：
[1] Grid (page layout) - Wikipedia, the free encyclopedia
[2] 栅格系统延续美学 | 百度MUX
[3] 网页的栅格系统设计 - 设计茶吧 | TaoBaoUED
[4] 为何要使用栅格系统? - UCD大社区
[5] CSS Grid Layout - W3C Working Draft
[6] 960 Grid System
[7] Grid design basics: Grids for Web page layouts - Dev.Opera
[8] Scaffolding #grid system · Bootstrap