Grid 网格

网格是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布，提高界面内布局的一致性和效率。

---

网格系统

在产品中，我们使用 2x 的网格和排版比例，也就是网格都是 2 的倍数。它是设计元素的布局和间距时的最小增量。

使用 2x 网格系统的好处：

• 灵活又可以保持视觉统一，让不同场景和页面保持足够的视觉层次和对比。
• 比例放大缩小方便，避免在某些屏幕密度下半像素渲染导致的图像模糊。

使用指南

• 4px 一般应用于组件中更详细的元素，包括输入标签、按钮和图标。
• 8px 一般应用于整个页面的布局，以定义页面模块和组件的位置。

网格比例

设计是一种比例关系，即尺度大小间的关系，我们在构建各种元素、组件和排版时，定义了一些基础视觉参数。

允许使用偶数（ x2、x4   或   ÷2 、÷4 ）等对这些值进行乘法和除法。

note

仅供设计排版布局时参考，不做代码使用。

Reference	Rem	Value (px)	Multiple	Usage	重要度
grid-base	0.125	2	1x	选项、菜单列表之间的上下间距
grid-1	0.25	4	2x	选项、菜单列表离容器之间的间距
grid-2	0.5	8	4x	组件内元素离容器之间的间距	重要
grid-3	0.75	12	6x
grid-4	1	16	8x	最通用，卡片容器之间的间距	重要
grid-5	1.25	20	10x
grid-6	1.5	24	12x	图标、组件小尺寸的默认大小，以及信息不需要那么紧密的业务场景的间距	重要
grid-7	1.75	28	14x
grid-8	2	32	16x	按钮、输入组件等的默认高度。	重要
grid-9	2.25	36	18x
grid-10	2.5	40	20x	按钮、输入组件等的相对大的高度。	重要
grid-11	3	48	24x
grid-12	3.5	56	28x
grid-13	4	64	32x
grid-14	4.5	72	36x
grid-15	5	80	40x
grid-16	6	96	48x
grid-17	7	112	56x
grid-18	8	128	64x
grid-19	9	144	72x
grid-20	10	160	80x
grid-21	11	176	88x
grid-22	12	192	96x	中台的 8 Column
grid-23	13	208	104x
grid-24	14	224	112x
grid-25	15	240	120x
grid-26	16	256	128x
grid-27	17	272	136x
grid-28	18	288	144x
grid-29	19	304	152x
grid-30	20	320	160x
grid-31	21	336	168x
grid-32	22	352	176x
grid-33	23	368	184x
grid-34	24	384	192x
grid-34	25	400	200x	中台的 4 Column
grid-35	51	816	408x	中台的 2 Column
grid-36	103	1648	824x	中台的内容区域最大宽度

排版网格

外间距 Margin：网格外边缘的边距始终是 16px，即卡片之间的间距。

内间距 Padding：始终将元素放置在卡片内安全框内，元素距离卡片间距为 16px。