960 grid system是使用固定宽度960pixel(像素)置中对齐画面的方式呈现在网页上，去除左右两边各10pixel的空间，留下中间940pixel的区块以20pixel作为间隔分栏。在空间设计上，可随意合并多栏作为版面配置及网页尺寸的设定，合并出来的栏宽也不会有畸零数，有利于css中div宽度的设定。
图：960 grid system - demo?(12栏)
960grid分为12栏与16栏两种，其中因12能被3、4、6整除，能建立3栏、4栏、6栏的版面配置，在使用上较为灵活，以下以12栏的样式做为示范。
只有左栏的尺寸设定
通常使用于内页设计：左方边栏+主要内容。
同时有左右栏的尺寸设定
常见于部落格的版面设计，使用于同时有左右两个选单的时候。
三栏的尺寸设定
通常用在首页或网站下方的自订区块(user-custom)，可放置快速连结、最新消息、广告讯息…。
四栏的尺寸设定
通常用在首页或网站下方的自订区块(user-custom)，可放置快速连结、最新消息、广告讯息…。
补充：
css框架已经出现很长时间了，关于这些框架的用处也被我们讨论了很多遍了。有人说，css框架不够先进，还有人说这些框架大大的节省了他们的开发时间。在此，我们将不再讨论这个问题。
前段时间，我了解到了css框架。经过对malo、blueprint和960做了实验对比后，我得出一个结论：我最喜欢960css框架。
本教程将解释这个框架的基本原理，这样你就可以用960来快速进入开发。（注：960网格系统官方网站点击进入）
基本原理 你必须知道一些基本原理来“学习这个框架是如何工作的”。你可以通过实验（或者是用firebug）来学习它，不过我也将会在这里为你介绍它。让我们开始吧。
不要编辑960.css文件 首先是一个小提示：不要编辑960.css文件，否则，将来你将不能更新这个框架。因为尽管我们需要布局我们的html，我们将创建一个独立的css文件。
加载网格 因为我们可以使用一个外部文件的css代码，我们必须在我们的html网站中加载它们，我们可以通过以下代码来实现：
这些做好了之后，我们必须添加我们自己的css文件。例如，你可以叫这个文件为style.css或site.css或者其它任何名字。用下面代码引用这个文件：
容器 在960框架中，你可以选择名为.container_12和.container_16的两个容器class。他们都是960px的宽度（这就是为什么叫960），它们的不同是分的列数不同。.container_12被分割为12列，.container_16被分割为16列。这些960px宽的容器是水平居中的。
网格/列 有很多列宽可供选择，而且在这两个容器里，这些宽度也不相同。你可以通过打开960.css文件来查看这些宽度。但是这对于设计一个网站来说是不必要的。有一个小技巧可以让这个框架更加易用。
比如，你想要在你的容器里建两列（叫sidebar/content）。你可以这样做：
sidebar
main?content
可以看到，你的第一列（grid_4）的数字加上第二列（grid_8）的数字正好是12。也就是说，你不必知道每一列的宽度，你可以选择列宽通过一些简单的数学计算。
如果我们要建一个4列的布局，代码可以是这样的：
sidebar
main?content
photo’s
advertisement
正如你所看到的那样，这个系统依然很完美。但是如果你想使用嵌套的列的话，你会发现它是有问题的。比如，如果后面三列都属于content列：
sidebar
main?content
photo’s
advertisement
你会发现这错位了，不过不用着急，这正是我们下一节要说的。
间距 默认情况下，每列之间都有间距。每一个grid_（这里代表数字）class左右都有10个像素的间距。也就是说，两列之间，总共有20px的间距。
20px间距对创建一个有足够宽的空白间距的布局来说是很棒的，它可以让一切看起来很自然。这也是我喜欢使用960的原因之一。
在上面的例子中，我们遇到了个问题，现在我们就来解决它。
问题是，每一列都有左右边距。而嵌套的三列中，第一列和最后一列是不需要边距的，解决方法是：
sidebar
main?content
photo’s
advertisement
我们可以简单的添加”alpha“样式来去掉左边的间距，添加“omega”样式来去除右边的间距。这样我们刚刚创建的这个例子在任何浏览器里面就很完美了（当然包括ie6）。
样式 好了，你现在已经完全了解如果用960框架来创建一个网格布局的基本原理了。当然，我们也可以添加一些样式到我们的布局中。
sidebar
main?content
photo’s
advertisement
因为css使用特性来确定哪一个样式声明具有高于其它样式的优先级。”id“比class更重要。
用这种方法，我们可以在自己的文件中重写那些被class设定的规则（比如宽度，padding，边框等）。
补充 以下是我做的一个简单的测试页面，代码如下：
test?page
0
00
a
b
c
以下是960官方的实例文档，可以看看它的网格是如何写的：
travis?isaacs?|?my?life?in?pixels
the?work?&?thoughts?of?travis?b.?isaacs
work
thoughts
photography
about
contact