点击左图直接查看Web版以下是文档版整理：
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，可以让网页的信息呈现更加美观易读，更具可用性。并且，对于前端开发来说，网页将更加的灵活与规范。（摘自TaobaoUED）
原理：
在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) - i = W
这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。
实例：
Yahoo首页横向版式设计采用的栅格系统为：（40×n）- 10 = W
被栅格后的效果图
模板使用与下载：
用Axure RP制作产品原型时，只需要将模板源文件相应的栅格系统复制一份到自己的Axure文件做背景。调整好位置，即可辅助你做出符合栅格系统的页面布局。
模板下载地址：
地址一：http://www.box.net/shared/zkzxmfv4vt
地址二：http://cid-e53ab38e4f6639a4.skyd ... 0by%20axure.org.rar
模板介绍：
要采用栅格系统考虑网页布局时要先放下对整个网页宽度的界定，而首先考虑根据设计风格确定一下各区块之间的间距及选用栅格单元块的大小。这两项确定之后， 让栅格从0-1000px铺开，在900-1000之间选择栅格的最后边界来确定最后的页面整体宽度。以下是一个区块间距的建议：
