栅格

概述

对开发者而言栅格是实现动态布局的手段，而对于设计师而言，栅格系统可以辅助设计师调整内容的位置以及对齐方式，使内容变得规律、有序。

网格单位

DMS Design是基于 8 点网格法来制定 PC 的栅格，建立 8 点为一个单位的网格，所有的元素尺寸都是 8 的倍数。使用 8 的倍数来定义模版块和内部元素的尺寸，填充和边距。使用8点网格法可以保证更统一的UI，更少的时间成本，更好的适应性从而规范自己的设计和开发，减少设计和开发的沟通时间，提高设计统一性。

基础规格

栅格由网格（Grid）、槽（Gutter）、列（Colume）、总宽度（Container）、边距（Margin）、列宽（Colume width）。 基于 8 点网格法 Cook Design 在 PC 上采用 24 栅格体系，本规范中默认以通用设计尺寸 Container=1440px 进行案例输出，栅格的槽宽固定，为 Gutter=16px。

使用原则

1、我们建议在系统中最多设立 6 个独立模块，最少设立 1个独立模块
2、Col-n ，表示n列栅格成组。纵向多个模块列多为等分，较为常见的有：2等分、3等分、4等分，但也可以根据业务诉求进行自由的分配组合，灵活布局
3、内容元素不要留在水槽中：内容元素应对齐栅格而非水槽

使用范围

1、一般在内容区域使用，不包含页面框架（顶部导航栏和左侧导航栏）
2、内容区域可根据实际场景的需要，选择整体或部分内容区域使用栅格。

断点适配规则

为了适配CBDP各平台的分辨率差异，也保障不分产品在不同分辨率下内容的视觉展示效果，需设计师根据单模块的基准尺寸、栅格区域的尺寸来定义不同分辨率下的断点适配规则。

常见分辨率

CBDP业务中，PC的常见分辨率有：1024（商家端POS机）、1280、1440、1920、2560（Retina）。因此我们在设置断点时，可以考虑这几个档位的变化规则。

如何设置断点

需在1440px的基准下，根据单模块的视觉展示效果，考虑模块的极限展示情况，即最大尺寸和最小尺寸。以等分排列的卡片布局为例，应用响应式栅格断点规则可进行如下设置

推导断点规则如下，设屏幕分辨率为W

XS：W＜640，栅格 1 等分，col-24

S： W ∈ （640,1280]， 栅格 2等分，col-12

M：W ∈ (1280,1920]，栅格 3等分，col-8

L：W ∈ (1920,2560]，栅格 4等分，col-6

XL：W＞2560，栅格 6等分，col-4