## 一、什么是栅格系统？ 栅格系统英文为`Grid Systems`，也有人翻译为网格系统，运用固定的格子，遵循一定的规则，进行页面的布局设计，使布局规范简洁有规则。 ### 1、栅格 栅格最早起源于平面设计。1692年法国为提高印刷水平，以方格为设计基础，将一个印刷版面分成上千个小格，这就是最早的栅格雏形。再后来，慢慢演变成运用固定的格子设计版面的平面设计风格。  ### 2、网页栅格 包括网页端和移动端，是以规则的网格阵列来指导规范界面中的版面布局以及信息分布。 ### 3、为什么要使用栅格 通过栅格的使用，可以用逻辑解释商业设计的细节问题。设计内容都应该有所依据，当其他人质疑时，可以系统有底气的解释设计内容。设计师可以利用栅格让画面更有调性，让内容更具可读性；可以快速校准元素的位置，让画面更平衡；可以模块化地管理元素，让版面更有层次感。 ## 二、栅格基础七要素 ### 1、最小单位 需要先定好界面的单位基础，后续内容元素和布局规则都是基于它整数倍递增。 * 网页端最小单位：10 * 移动端最小单位：3、4、5  ### 2、总宽度 W 总宽度：对整体布局进行规范，且还可以保证设计尺寸的统一性。 界面设计要有具体尺寸，由于内容多少不确定，所以高度没有办法定死，但内容区的宽度是可以定的。  ### 3、列数 N 列数是界面总宽度设定好后，纵向等分成几列。 * 网页端：12列、24列（常用等分列数，当然不是固定的，需要根据自己的内容设定列数） * 移动端：6列（常用等分列数）  ### 4、大列宽 L 把界面总宽度等分成几列，每一列的宽度即为大列宽。计算公式：L = W / N（大列宽包含：列宽和水槽）。  ### 5、水槽 G 相邻两个列宽之间的间隔是水槽。水槽宽度越大，页面留白和呼吸感会更好，反之则更紧凑。水槽可以将内容更规范的区分开来。  ### 6、列宽 C 把界面总宽度等分成列，相邻两列之间的间隔（水槽）减去后就是列宽。  ### 7、安全边距 界面左右能保证可读性和美观度的、合适的空隙就是安全边距。计算公式：M = G / 2（安全边距是水槽的0.5倍）。 除了使用水槽的0.5倍，还可以使用0、0.5、1.0、1.5、2.0等水槽的倍数。举例：水槽是20，使用0.5倍，安全边距为10；水槽是20，使用2.0倍，安全边距为40。