网格系统在页面布局和尺寸设置上给设计者一个直观的参考，使得页面设计有规律，从而降低设计决策的成本；提高了页面布局的一致性和可重用性。本文主要围绕三个部分展开:什么是网格系统，如何构建网格系统，网格系统的应用。在项目中提前定义网格系统，有助于协同设计师输出元素间距高度统一的页面，希望对正在学习网格知识的你有所帮助！！！

1.什么是网格系统

1.1网格单元

网格是由一系列规则的小网格组成的网格系统，这些网格构成了一个页面的最小单位。在网页设计中，网格大小往往被定义为8，这不仅符合偶数的思想，而且与大多数主流显示设备相匹配。目前前端开源组件库大多是基于8的原子单元设计的。

1.2柱+槽(柱+檐槽)

网格系统由圆柱和槽交替分布而成。列是网格的数字单位。通常设置网格数就是列数。例如，12个网格有12列，24个网格有24列。分隔页面内容之间的空间。檐槽数量越大，留空白的页面越多，视觉效果越松散。相反，页面越紧凑。插槽通常设置为常数值。

1.3盒子/面积

基本网格建立后，一条内容通常占用几列和列的宽度。我们把这个区域理解为一个内容框，用来承载一个区域的内容。

2.如何构建网格系统

2.1确定网格区域的宽度

以“交互规范框架布局让页面模块更加统一”的全局控制层布局中的“全屏”为例，网格区域的宽度=响应区域& # 8211；页边距*2。

以“交互规范框架布局使页面模块更加统一”的全局控制层布局中的“固定宽度”为例，网格区域的宽度=响应区域。

2.2确定列数和槽宽

常见的网格系统通常分为12个网格或24个网格。插槽区域不能放置任何内容。我们将为插槽设置一个固定值，以确定列的大小。

计算公式:网格面积宽度= n*(列宽度+槽宽)& # 8211；槽的宽度。

栅格化工具推荐:GridGuide

12网格系统:

12网格系统广泛应用于Bootstrap和Foundation这两个流行的用于前端开发的开源工具库。适用于业务信息分组少、单箱信息量大的中后端页面设计。

24网格系统:

24格系统适用于业务信息大、信息分组多、单个框内信息量较小的中、后页设计。与12格系统相比，24格系统更加灵活，更适合内容多样复杂的场景。

3.网格系统的应用

3.1横向划分

以一个12格系统为例，网格区域可以根据业务场景轻松划分为2等份、3等份、4等份、6等份，以及根据等份模块组合的各种不等份。

以查询页面为例，“过滤区”分为三等份，“数据统计”分为三等份，“数据列表”分为一等份。

3.2垂直划分

垂直划分以8为基础，信息级别分为3个规格:8px(小间距)、16px(中间距)、24px(大间距)。

如果这三个规范都不适用，可以增加或减少“基距”的倍数，或者增加元素(分割线)，打开信息层面。计算公式:y = 8+8 * n (n >: = 0，y为纵向间距)。

“摘要”

在一个项目中，许多设计师一起参与完成项目。由于每个设计师使用的画板不一定相同，建议“统一画板”的尺寸为1440，根据& # 8221；全局控制层& # 8221；、”内容层& # 8221；、”临时层& # 8221；每一层的布局进一步决定了项目的整体布局，让参与的设计师有一个统一的页面布局基础。根据不同的业务场景进行设计时，不同设计师制作的设计在布局上会高度统一。

如果你在设计一个0-1的项目，希望布局三部曲《框架布局》《网格系统》《回应风格》对你有帮助！！！