栅格系统的设计原理及应用

来源：济南天琥设计培训学校时间：2018/12/20 11:52:15

如何设计一个栅格系统?接下来我们将通过实例，详细的介绍一下网页栅格系统的原理与应用：

在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：

W =(a×n)+(n-1)i

由于a+i=A，

可得：(A×n) – i = W

这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。我们拿yahoo作例，来看一下栅格系统的应用：

yahoo的网站页面宽度为W=950px，每个区块与区块的间隔为i=10px;如果应用上面的公式，可以推出A=40px，既yahoo首页横向版式设计采用的栅格系统为：

(40×n)- 10 = W