HTML栅格系统如何设置内边距,交互规范：栅格系统让页面元素间距更统一

栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律，从而减少了设计决策成本；提高了页面布局的一致性跟复用性。本文主要围绕什么是栅格系统，如何搭建栅格系统，栅格系统的应用 三个部分进行阐述，在项目中提前定义好栅格系统将有助于协作的设计师输出元素间距高度统一的页面，希望对正在了解栅格知识的你有帮助！！！

1. 什么是栅格系统

1.1 网格单位

栅格是由一系列规律的小网格组成的网格系统，网格构成页面的最小单位。在网页设计中经常将网格的大小定义为8，不仅符合偶数的思路同时能够匹配多数主流的显示设备，目前前端开源组件库也多基于8的原子单位来设计。

1.2 列+槽( Column+Gutter )

栅格系统是由列(Column)跟槽(Gutter)交替分布形成的，列(Column)是栅格的数量单位，通常设定栅格数量说的就是列的数量，比如12栅格就有12个列、24栅格就有24个列。槽(Gutter)页面内容的间距，槽的数值越大，页面留白越多，视觉效果越松散；反之，页面越紧凑。槽通常设为定值。