Skip to main content

Grid 网格

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


网格系统

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

使用 2x 网格系统的好处:
  • 灵活又可以保持视觉统一,让不同场景和页面保持足够的视觉层次和对比。
  • 比例放大缩小方便,避免在某些屏幕密度下半像素渲染导致的图像模糊。
使用指南
  • 4px 一般应用于组件中更详细的元素,包括输入标签、按钮和图标。
  • 8px 一般应用于整个页面的布局,以定义页面模块和组件的位置。

网格比例

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

允许使用偶数( x2x4    ÷2÷4 )等对这些值进行乘法和除法。

note

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

ReferenceRemValue (px)MultipleUsage重要度
grid-base0.12521x选项、菜单列表之间的上下间距
grid-10.2542x选项、菜单列表离容器之间的间距
grid-20.584x组件内元素离容器之间的间距重要
grid-30.75126x
grid-41168x最通用,卡片容器之间的间距重要
grid-51.252010x
grid-61.52412x图标、组件小尺寸的默认大小,以及信息不需要那么紧密的业务场景的间距重要
grid-71.752814x
grid-823216x按钮、输入组件等的默认高度。重要
grid-92.253618x
grid-102.54020x按钮、输入组件等的相对大的高度。重要
grid-1134824x
grid-123.55628x
grid-1346432x
grid-144.57236x
grid-1558040x
grid-1669648x
grid-17711256x
grid-18812864x
grid-19914472x
grid-201016080x
grid-211117688x
grid-221219296x中台的 8 Column
grid-2313208104x
grid-2414224112x
grid-2515240120x
grid-2616256128x
grid-2717272136x
grid-2818288144x
grid-2919304152x
grid-3020320160x
grid-3121336168x
grid-3222352176x
grid-3323368184x
grid-3424384192x
grid-3425400200x中台的 4 Column
grid-3551816408x中台的 2 Column
grid-361031648824x中台的内容区域最大宽度

排版网格

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

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