栅格系统英文为“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.
