栅格是视觉设计中的基石。使用栅格系统，赋予视觉的要素一定的秩序感，从而完成更秩序、更高效的视觉搭建，更合理的指导页面布局结构，激发更多丰富的视觉创意，是一切视觉的基础框架。

原则

我们需要一种弹性的栅格系统，它遵循如下原则：

1. 由于新零售 b 类场景特点是信息密度高，考虑到屏幕利用率和可读性，采用“紧凑型”栅格布局规则

2. 布局以 4 栅格作为响应式断点的最小依据

注意：响应式栅格的列宽是随着页面宽度变化的，因此用百分比来表示

我们设定：以 4 为栅格；水槽固定宽为 12px；最小列宽为 80px

关于【4】

分辨率与最小栅格单位在 x、y 轴整除关系表。「 4 」是整除率最高的一个原子

偶数原则

在页面缩放中最大程度的避免类似于 0.5、0.75、1.25 等次像素的出现，从而使页面各类元素在大多数场景下都能有比较精致的细节表现。

进步规则

1.栅格基础数字原则为 2 的 X 平方（X 大于等于 2），即最小数字单位为 4。

基础序列为 2 的平方数（2²、2³、2⁴、2⁵、2⁶… )

2.扩充序列基于基础序列，在 8 - 80 之间，每一级通过额外增加 4 来进行有序扩充，以更好应对更多细分场景。