IT北瓜

      960 Grid System是一个非常棒的布局辅助设计系统，以960PX为基准宽度提供了12列和16列两种布局模式（PS：目前官方已经提供了24列的布局模式，相信作者以后还会提供更多的布局模式）。

      1：alpha与omega

      960 Grid System的布局宽度为960PX，但由于每列左右均由10PX的margin（外补丁），因此内容宽度实际为940px。

/*
alpha：用于清除左边10px的margin
omega：用于清除右边10px的margin
*/

      PS：从作者取alpha与omega这两个名字可以想象一下或许作者很热爱希腊文化。alpha（α）在希腊字母表里，它是第一个字母，读作“阿尔法”（阿拉法），代表开始；omega（γ）在希腊字母表里，它是最后一个字母，读作“欧美噶”（俄梅嘎），代表终了。

     2：prefix_XX与suffix_xx

/*
用于在每个单元网格的前面或后面添加空白的列（栏）
*/
/*
用法：
<div class="grid_1 prefix_15">IT北瓜</div>
*/

      3：clear与hr

/*
用于清除层的浮动
*/
/*
用法：
<div class="clear"></div>
*/
/*
但假如你查看过官网主页的源代码你会发现，作者用的是<hr />
*/
/*
用法：可参考官网主页的源代码
<hr />
*/

     4：push_xx与pull_xx

/*
这是2009-06-29更新新增的类，用于重新定制布局顺序
*/
/*
用法：引用官网主页源代码
*/
<h1 class="grid_4 push_4">
    960 Grid System
</h1>
<!-- end .grid_4.push_4 -->
<p id="description" class="grid_4 pull_4">
    <a href="files/960_download.zip">Download</a> &larr; Templates for <a href="http://www.adobe.com/products/fireworks/">Fireworks</a>, <a href="http://www.adobe.com/products/indesign/">InDesign</a>, <a href="http://www.inkscape.org/">Inkscape</a>, <a href="http://www.adobe.com/products/illustrator/">Illustrator</a>, <a href="http://www.omnigroup.com/applications/omnigraffle/">OmniGraffle</a>, <a href="http://www.adobe.com/products/photoshop/">Photoshop</a>, <a href="http://office.microsoft.com/en-us/visio/default.aspx">Visio</a>, <a href="http://www.microsoft.com/expression/products/Design_Overview.aspx">Expression Design</a>. Sketch PDF. CSS code. The 960.css file is 5.4 KB. View <a href="http://bitbucket.org/nathansmith/960-grid-system/">repository</a>.
</p>
<!-- end #description.grid_4.pull_4 -->
<hr />
<div class="grid_6">
    <p>
        <a href="http://www.spry-soft.com/grids/"><img src="img/tool_css.gif" alt="Custom CSS generator" width="460" height="60" /></a>
    </p>
</div>
<!-- end .grid_6 -->
<div class="grid_6">
    <p>
        <a href="http://gridder.andreehansson.se/"><img src="img/tool_bookmark.gif" alt="Grid overlay bookmark" width="460" height="60" /></a>
    </p>
</div>
<!-- end .grid_6 -->

      5：container_xx与grid_xx

/*
这是该系统最基本最重要的用法，其中xx代表列数
*/
/*
用法：
*/
<div class="container_12">
    <div id="sidebar" class="grid_2">sidebar</div>
    <div id="content" class="grid_10">
        <div id="main_content" class="grid_6 alpha">main content</div>
        <div id="photos" class="grid_2">photo’s</div>
        <div id="advertisements" class="grid_2 omega">advertisement</div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
</div>

     一、960的奥妙

      从数学着手： 960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍：

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,
48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

共26种（26 = 7 * 2 * 2 – 2, 减去2是去掉1和960自身），我们标记为：

N(960) = N(2^6 * 3 * 5) = 26

根据上面的算法，可以得到：

N(360) = N(2^3 * 3^2 * 5) = 22
N(480) = N(2^5 * 3 * 5) = 22
N(720) = N(2^4 * 3^2 * 5) = 28
N(750) = N(2 * 3 * 5^3) = 14
N(800) = N(2^5 * 5^2) = 16
N(960) = N(2^6 * 3 * 5) = 26
N(1000) = N(2^3 * 5^3) = 14
N(1024) = N(2^10) = 9
N(1440) = N(2^6 * 3^2 * 5) = 34
N(1920) = N(2^7 * 3 * 5) = 30

从上述算法我们可以得出以下结论：

要使得N(width)最大，width的取值有两个系列： A系列： …, 320, 720, 1440, … B系列： …, 480, 960, 1920, … N越大，可组合的宽度值就越多。

      目前绝大多数显示器都支持 1024 x 768 及其以上分辨率，而960恰好是1024 x 768 分辨率下最灵活也是最合适的尺寸，这些条件决定了960成了目前设计中最完美的尺寸。（PS：此部分内容大多摘自：960 Grid System 研究）

      二、960网格系统简介

      官网原文：

Essence

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. Read more.

Dimensions

The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. View demo.

Purpose

The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

      Leeo译文：

本质：

960 Grid System 是一套基于宽度为 960px CSS 框架，它为网页布局提供了通用的尺寸设置，它提供了两种不同的尺寸布局：12列和16列，它们可以独立使用，也可以一起使用。

尺寸：

12列的布局，将总宽分成12份，每份的宽度是60px，而16列的布局分成16份，每份的宽度是40px，每部分左右边距都是10px，从而每列产生20px的空隙。

目的：

该系统以快速原型开发为出发点，但同时也能很好地集成到生产环境中去。它同时提供了打印布局、设计布局和一个能提供一致尺寸的 CSS 文件。