栅格系统

栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁。

网页中的栅格系统

网页栅格系统是从平面栅格系统中发展而来，最早运用于平面、杂志等版式设计中。推荐阅读[平面设计中的网格系统].Grid.Systems.In.Graphic Design.(目前网上找到的只有英文版pdf)

对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。在网页设计中，如果把网页宽度平均切分为多个网格单元，每个单元之间预留一定的空隙，此时整个页面就如同一个栅格系统。

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

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

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

W =（a×n）+（n-1）i

由于a+i=A，

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

这个宽度 W=1240，1240=25*50-10

若宽度为950

将上面的公式实例化一下：

950 = 12 * 80 - 10

950 = 16 * 60 - 10

950 = 24 * 40 - 10

上面三种切法，N越大，灵活度越高。可以根据网页的实际复杂度来选用对应的切法。

12列分割如下

同理16、24.