栅格可以有效的保证页面的一致性、逻辑性，通过调整布局网格可以满足产品和各种设备尺寸的需求，我们采用 24 栅格系统，基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。

构成

• 总宽度 W ：应用栅格的内容区整体宽度（With）
• 栅格宽度 C：即列宽，是每一个栅格的宽度（Column With）
• 水槽个数：栅格之间的间距有多少个，为 (栅格数 - 1 )，故 24 栅格系统下该值为 23
• 水槽宽度 G ：每个水槽的宽度（Gutter），数值可自定义，一般为 8 的倍数，常用 16 或 24，等分情况下宽度则与栅格宽度一致
• 边距/偏移量 M：第一个栅格距离页面边框的距离（Margin）

与开发对接时，需明确的参数有：总宽、水槽宽度、偏移量

应用与实践

栅格系统应用于内容层。在版式设计与内容布局时，如Dashboard、表格筛选项排列、卡片模块等，可辅助设计师调整内容的位置以及对齐方式，使内容变得规律、有序：

需要注意的是：

• 不是所有页面都一定要使用栅格，根据设计场景自行判断；
• 内容元素应对齐栅格而非水槽；

在设计软件中设置栅格