一、网页的Grid（栅格、网格）的定义
就是用规则的格阵来指导和规范网页中的版面布局以及信息分布。
二、Grid系统设计页面具有以下优势
- 能大大提高网页的规范性。在Grid系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。
- 基于Grid 进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。
- 对于设计师们来说，灵活地运用Grid系统，能做出很多优秀和独特的设计，应用“黄金分割”原理确定版块宽高比例。
之前做网页，总再想“这一栏要多宽才好看呢？加一两个像素看看~ 哎呀~ 还是减一两个看看吧……”很耽误时间，没有个定数完全凭感觉。现在好了，有了Grid指导，就可以为所有栏目的宽度做一个约束，这下定宽有数了（优势1），这样页面整体看起来端庄一些（优势2）。
在网页设计发展到一定阶段的时候就必然会和其他学科或领域只是产生交汇和共鸣，网页栅格设计，通过很有逻辑性的公式换算加上一定的数学分析，得到对网页设计有建设性的概念指导，从一定程度上说算是一种创新。
也许有的设计师会认为使用这些所谓的规范性东西会是一种限制而不是创造，在我看来这些新的概念对网页设计来说是一种尝试和提升，会给你接下来的创意构思提供一个坚实的基础，让人从一个新的视角来看待好的网页设计。
在《超越CSS：Web设计艺术精髓》（卓越、当当）这本书中，就提到了网页设计中的黄金比例这个概念。对于很多做设计的人来说，黄金比例并不陌生，它是最符合自然界美感的一个很神奇的东西，在古希腊的艺术雕塑中频频体现出来。对于我们网页设计师来说，只要记住一个数字就可以了：“1.62”。（优势3）
通过Grid 就可以快速省事、有效率、规模化的建成大量页面。一些资深网页设计师，在网页栏目版块布局方面的经验值，实际上就是Grid 的应用。
三、网站栅格的应用实例
Grid 12 x 80
Grid 24 x 40
四、Grid 的生成公式
将Flowline的总宽度标记为W, Column的宽度标记为c, Gutter宽度标记为g, Margin的宽度标记为m, Column的个数标记为N, 我们可以得到以下公式：
一般来说，Gutter的宽度是Margin的两倍，上面的公式可以简化为：
将c+g标记为C, 公式变得非常简单：
下图是Grid 的另一个公式形式，实际同上面相同，只是公式字母变了而已，互相参考着理解Grid 。
五、Grid 960常用尺寸和Demo
六、工具
网格方案生成器-1 [ 作者：lifesinger ]
1KB CSS Grid 网站上提供了一个生成器用来定制 CSS 网格，并且可以直接下载定制好的 CSS 网格。
七、本文综合以下文章
