1,什么是栅格化系统?

 

栅格系统英文为“grid systems”,也有人翻译为“网格系统”,其实是一回事。不过从定义上说,栅格更为准确些,从维基百科查到栅格的定义为:栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。运用固定的格子设计版面布局,其风格工整简洁,已成为今日出版物设计的主流风格之一。

 

2,网页中的栅格系统

 

是以规则的网格阵列来指导和规范网页中的版面布局,使得网页便于阅读,让网页规范规整;

 

一下网页使用的是网页栅格布局,里面的想相关信息根据网格做了相应对齐;页面看上会整洁规范;

 

 

一个标准的栅格系统,包括以下部分:

 

将flowline的总宽度标记为w, column的宽度标记为c, gutter宽度标记为g, margin的宽度标记为m, column的个数标记为n,我们可以得到以下公式:

 

w = c * n g * (n - 1) 2 * m

 

一般来说,gutter的宽度是margin的两倍,上面的公式可以简化为:

 

w = c * n g * (n - 1) g = (c g) * n

 

将c g标记为c,公式变得非常简单:

 

w = c * n

 

 

如果每次设计前都要计算,那就太麻烦啦,这里推荐几个网站,可以有效的辅助设计;

总之,对于内容信息不确定导致高度不确定的页面,在高度层面上就无法做到栅格了。当然,具体的情况还需具体的分析与解决,这就需要设计师们在实际的应用中不断的总结经验,不断实践了;