开篇：为什么栅格系统要和布局方式放一起阐述？

👋👋👋看这里很重要哦：

正文：

一、栅格系统

🌲🌲不介绍起源之类的赘述，我们直接杀入正题，使用最简单的、最少的文字为大家诠释栅格系统的使用和注意事项。

1.1栅格的作用

虽然现在有各种工具比如：Figma、蓝湖、Master Go等工具可以明确的标明元素与元素、板块与板块之间的间距，但是在实际的产品研发中到视觉走查这个过程总是还是会有很多差距。

无限循环于《设计稿——前端开发——测试版本——视觉走查——前端修改——视觉走查——前端修改——视觉走查》最后一看感觉好像差不多，但是又感觉哪里怪怪的。查看 CSS 样式发现很多间距有问题。PS：大厂大佬勿扰！！！

主要原因在于前端不愿意去花费大量的时间去认真看设计稿的间距等问题（🐶保命）。

而栅格化则可以比较好的解决这个问题，在前端做样式时，心理大概有底对于元素和元素以及板块与板块之间的间距问题进行比较好的把握。

栅格系统的建立不仅对于前端而言更加有利于开发，对于设计师与设计师之间也可以更好的对接，可以提高整个团队的效率。

🌲🌲总结以下三点

1.帮助我们实现更规范的排版布局和信息分布，使得页面呈现出秩序之美。

2.提高页面布局的一致性和复用性，减少设计师在基础布局上的思考，从而提高设计效率。

3.更好的实现响应式布局，更好地适应不同设备，让开发人员能够更好地还原设计效果，避免在多个版本中重复进行改写

1.2栅格的构成

网格（Grid）：是栅格系统的最小单元，由若干个单元格组成。

列（Column）：是页面上的垂直区域，一般由若干个网格单元组成。

水槽（Gutter）：是列与列之间的空间，一般也是由网格单元组成。

边距（Margin）：是页面外部的空间，一般也是由网格单元组成。

栅格总宽（Container）：是页面上总的宽度，也就是栅格的总宽。

容器盒子（Container）：是页面上所有内容的总和，也就是栅格系统的容器

👋👋👋栅格由以上元素组成，当然我们在网上找参考资料时可能会遇到不同的名词描述。不需要太在意叫法只需要理解栅格的含义就可以灵活运用

1.2.1 网格：Figma中有可展示网格 —— 同类软件如：Master Go 或者 即时设计等也有。

网格的建立应该按照最小单元——8px 原则

网格的基本组成单元是单元格，这些单元格相互交织构成了一个网络。最小的单元格是界面设计的基础单位，所有的界面元素都是在这个基础单位上布局和分布的。这个基础单位对于创造性的决策具有非常重要的指导意义。

为何要以8pc 为设计单位呢

因为目前我们使用的主流显示分辨率都可以被8整除，使用8作为最小的单元时，能够适配绝大部分的显示器。可以确保设计的一致性的同时保证最终呈现可适配多种尺寸。

网格的设计如下图所示

整个内容设计元素与元素、板块与板块、间距等都以8为倍数进行，如下图所示：

1.2.2 列——用于内容对齐，删格的单位

👋👋👋通常有12栅格和24栅格也就是12列和24列，当内容较多时选用12列，内容较少时选用24列。通过列可控制整个版面布局的呼吸度和舒适度，过多或者过少的列会导致版面的拥挤和稀疏。

1.2.3 水槽——列于列之间的分割间距，用于区分板块内容。

👋👋👋 水槽区域不放任何的板块和元素内容。

水槽的作用与功能：

1.水槽可以辅助区块内容的分隔。

2.水槽的宽度在一定程度也会影响界面的风格。

设计师可以根据实际的设计去进行水槽的设定，越大的水槽意味着更宽的间距和留白。随着这些年设计的流行，推荐使用更大一些的水槽。

1.2.4 边距——设计内容左右两边的边距（禁止放任何元素）

👋👋👋此处区分移动端、PC端、PC——B端系统不同布局方式去进行边距的设置，用于控制主要显示内容区域的布局。

🌰🌰🌰简单为大家举几个例子——具体的应用可在响应式布局中一起阐述

移动端——2倍图情况下之前以：24px 18px 为边距，随着设计趋势的发展现在多种不同的边距展示如：32px、36px、28等 可根据产品的特性进行调整，并没有规定的那么死板

PC端——PC网页多以1200为内宽选择不同的设计尺寸那么空余的左右即为边距

PC（B端）——情况比较多样分布局情况去进行，新手设计师可按照16px、24px、32px 去调整边距（同PC全屏展示）

1.2.5 栅格总宽——指列加水槽加安全边距的宽度总和

1.2.6 容器盒子——指页面上所有内容的总和，在盒子内进行页面布局设计（元素、板块、区域内容等）

⚠️⚠️⚠️ 容器盒子在PC-B端中不包括导航条和左侧菜单，根据不同的布局只包括内容区域

🌲🌲🌲 下篇内容主要围绕响应式设计和栅格系统结合阐述