干货：网页设计之栅格系统

1、栅格系统的形成

栅格系统（Grid system）最早源于17世纪末的法国印刷业和出版业。维基百科将它定义为一种平面设计方法和风格，也称为网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格或国际主义平面设计风格。这种系统逐渐演变为网页栅格系统，通过规则的网格阵列来指导网页的版面布局和信息分布。

2、栅格系统的原理

栅格系统通常分为12列、16列或24列等，允许自定义栅格宽度和间距。设页面或区块宽度为W，一个栅格单元的宽度为A，单个栅格宽度为a，栅格间距离为i，n为正整数，则有W = (a * n) + (n - 1) * i。由于A = a + i，故(A * n) - i = W。此公式揭示了网页布局与栅格系统间的内在联系。设计师依据需求调整A和i的值，以此开展设计工作。

3、经典960栅格

设计师偏好在苹果系统上设计，其浏览器默认宽度为960px。在1024 x 768分辨率下，扣除Firefox的7px边框，实际网页大小为960 x 650。960仅作为符号，非标准数值。基于特定算法，我们可以得到多种宽度组合，如960、360、480、720、750、800等。960因其灵活性和适配主流显示器分辨率而成为网页栅格系统中的理想宽度。

4、使用栅格系统的优势

对于设计师，栅格系统提供了一种逻辑性的设计框架，有助于保持页面布局一致性，增强信息的美观性和易读性。它并非限制设计，而是帮助设计师有序布局。对于前端开发者，栅格系统定义了页面结构的标准，提高了规范性，降低了大型网站的开发和维护成本。随着响应式设计的发展，栅格系统成为实现不同屏幕尺寸适应的有效工具，让设计和开发响应式布局变得更加便捷。尽管如此，了解栅格系统的本质后，我们也可以跳出框架，进行创新设计。