提到秩序感，会想到整齐、统一、安全等感性词语，再想想，会出现规章制度、阅兵、处女座等事务。社会学角度，秩序规范着我们的言行，约束我们践行社会主义接班人的责任。秩序不是法律法规，没有明文规定要怎么做，但它像道德时时刻刻影响着生活。
秩序感在页面设计中，存在量化标准，在人人是设计师时代，斜杠青年的你，进来了解一下呗～
隆重推出栅格系统，它能建立秩序性的信息布局。循序渐进，从来源、系统规范，计算方式、实践应用，一层层揭开栅格本质和要点。
源头
印刷行业最早引入网格系统，目的是建立有秩序的版面。利用垂直与水平参考线，将版面分割成格子，一是控制版面中的留白，二是设定内容的比例关系，三是对齐元素。
阅读载体从纸转移到网页，阅读习惯变化小，所以同样要建立秩序性的信息布局，在网页栅格系统中沿用留白、比例关系、对齐元素等理念。
信息疏密影响阅读的效率，信息太密集，容易看错行；信息太稀疏，词句不连贯，影响理解，合适的留白是重要的。
三大规范
简单看下 Bootstrap 栅格系统在多种屏幕的表现。列数默认是12，槽宽（后面叫做间距宽度）默认是 30px，注意参数都是可以调整的。Bootstrap 的主要目的是为了适配屏幕进行自适应布局，而我们在做网页时，很少使用30px，经常使用 4npx作为间距宽度。
来源：https://v3.bootcss.com/css/#grid-options
IOS的Human Interface Guidelines 推荐使用 8 点约束，根据平时制图，理解间距宽度为 8 或者 8 的倍数来制图。
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
Android卓官方文档建议大间距使用 8 dp，小间距使用 4 dp【dp与px的换算关系px=dp*(dpi/160)】
https://material.io/design/layout/understanding-layout.html#
计算方式
7个概念
- 间距宽度：也叫做栅格间距，gutter width，推荐使用 4npx，n 是自然数。
- 列宽: 每一列的宽度，colume width。
- 总宽：从第一列到最后一列的宽度，total width。
- 列/栏数：number of colume
- 偏置：offset，第一列距离画板左边缘的横向距离。（代码中认为offset是间隔数，是不一样的。）
- 外围间距：也叫安全边距，是0.5 倍的间距宽度。
- 屏幕安全边距：移动端专用的参数，指栅格系统距离屏幕边缘的距离，当然这也是不能放置内容的。
（备注：间距宽度、列宽、总宽、列数、偏置、是sketch中的叫法。）
计算公式
安全距离能设置放栅格内或者外，放栅格内，栅格系统从列开始到列结束。放栅格外，栅格系统从安全边距开始到安全边距结束。下图示意。
安全距离在内，W 是 总宽、c 是列宽、i 是间距宽度、n 是列数。
推荐放栅格内。因为安全边距是不能放图形的，而我们做图时，习惯从左侧开始画图。放栅格内，从列开始做图，符合习惯。放栅格外，注意开始和结束，要预留安全距离，容易出错。
安全距离在外，W 是 总宽、b 是列宽、i 是间距宽度、n 是列数。
计算过程
因为栅格系统中不能输入小数，用公式计算，会出现不能整除情况，采用四舍五入显示，页面内容按照栅格布局。
W （总宽）、c （列宽）、i （间距宽度）、n （列数）4个参数灵活设计，尽量保持整数，也不必过度追求整数。
一般来说画完纸面草图，心中有了大概布局，能确定总宽、列数，这两个参数，（实在没想法时，参考其他网站的布局，看下别人怎么做栅格系统的，根据业务再调整），间距宽度是常见的4npx，套入公式，四个值再进行调整，算出列宽。因为列宽随着屏幕变化，取列宽的近似值，其他三个值保持整数。
案例
移动端例子
为什么用344px作为总宽？一方面因为总宽是偶数计算方便，二是常用 16px （15.5 四舍五入）作为屏幕安全距离。点击偏置后面的居中按钮，将栅格系统居中。
sketch里面显示偏置是 16px，但是页面中第一列距离画板左侧边缘是15.5px，所以页面中信息从15.5px处开始。
安全距离在内
安全距离在外
用公式计算，出现不能整除情况，因为栅格系统中不能输入小数，sketch采用四舍五入显示。
网页例子
语雀使用 1216px 画板作为页面的最大宽度。总宽1184px、24 列、16px 间距宽度。
如下示意，看到栅格系统第一列和最后一列，到两边各 16px 的留白，留白是为了美观，跟栅格系统没有直接关系，也可以设置 12px 等其他数值留白。
栅格内嵌套栅格
新栅格的偏置是 216px ，也就是第一列到左侧画板边缘的距离。由于不能整除，列宽取近似值。
tips
- 屏幕大，适合使用更大的间距宽度，因为大屏幕，展示更多信息，相较于小屏幕，阅读负担大，配合更大的间距宽度，提高易读性。内容越多，适合使用更多的列数，用占用的列数，对内容进行分组。
- 页面宽度变化，不会改变栅格数量和间距宽度，但是列宽会变化，所以内容要从列开始，到列结束。这样改变页面宽度时，内容的疏密变化是均匀的。不建议从间隔开始，或者到间隔结束。
- 网页自适应，一般有最大和最小宽度，为了易读性，不会无限变宽和变窄；超出最大宽度后，使用2侧留白，小于最小宽度后，遮挡信息，实现信息不折叠，具有可读性。
- 最大宽度和最小宽度2个临界状态，用设计做图明确。跟栅格数没有直接关系，为了减少图数量，使用任意一个，进行栅格系统标注。
- 常用参数。移动端，4 列常用 344px 作为总宽。网页中，12 列常用 984px 、1008px；16 列常用 992px；24 列常用 1136px、944px。具体还是要根据页面横向要分几个区域，信息有多少分组，再确定栅格数量和总宽。
信息横向分布，根据比例分为均等和比例分布2类
均等分布
平均划分，优点是布局对称，审美在线；缺点是信息层级一致，平庸没有重点。所以有需要特别强调的信息不适合用，适合用在信息层级相同的内容上。
单栏，位置居中。为了易读性，通常在两边预留空白。用在资讯详情页，去除其他干扰，聚焦内容。如Medium 详情页、微信公众号网页版等。
二栏、三栏等多栏，将页面均等分割后，每列信息由于列宽变窄， 可读性提高。反而不需要过多留白，往往比单栏能够承载更多信息。均等分布，常用在对比页面，
比例分布
用栅格占用的比例分配页面，从第一个栅格开始，到最后一个栅格结束，是信息占用的栅格数。比例根据内容占用的宽度来分配，通常使用12栅格，12指栅格的列数。
比例分布是不均等分布，用大比例，突出重点内容。在可视范围，人眼自觉将靠近的信息分为一组，比例大的组，更容易被注意到（颜色相同的情况下）。
水平方向上，分割成比例不同的列，能直观看到。竖直方向，由于屏幕高度有限，比例不明显。
下面以语雀为例，使用24列栅格。左侧导航与右侧内容，以4：20分割24列，间距宽度是16px。如下图。
在尝试页面信息布局比例过程中，一个栅格不一定适用页面所有信息，为了平衡美观视觉和栅格系统，一方面会对宽度进行微调，另一方面也会使用栅格内嵌套栅格。
右侧内容多，嵌套栅格，能够更精细控制内容，也能将信息安排在栅格内。右侧2部分内容以17：7分割24列，间距宽度也是16px。
为什么会用栅格内套栅格？举个例子，社区作为一个系统，由 1 到 30 栋楼组成，栋是第一层分类；每栋里面有 2 个入口，分为 2 个单元，单元是第二层分类；每个单元有 12 个家庭，家庭是第三层分类。信息也有类似细分，功能分类下存在更细的划分，一个页面会有多套栅格。
实现
简单介绍，四个参数，总宽、列数，间距宽度，偏移位置，开发就可以设计栅格系统。
这四个数据在同一个硬件上，一般是不会变化的。响应式页面因为要适应移动端、pad、网页三种屏幕变化，有必要调整这四个数据。具体根据产品场景，合理规划栅格。
人人是生活的设计师，在实现自我价值过程中，内心世界的秩序感，能让前行的脚步更坚定，稳固。栅格系统规范页面布局，让信息有序呈现，动手试试呗～
