跳到主要内容

Grid 栅格

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

栅格介绍​

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

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

使用指南

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

栅格模度​

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

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

备注

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

名称大小(px)大小(rem)倍数用法重要度
grid-base20.1251x选项、菜单列表之间的上下间距
grid-140.252x选项、菜单列表离容器之间的间距
grid-280.54x组件内元素离容器之间的间距重要
grid-3120.756x
grid-41618x最通用，卡片容器之间的间距重要
grid-5201.2510x
grid-6241.512x图标、组件小尺寸的默认大小，以及信息不需要那么紧密的业务场景的间距重要
grid-7281.7514x
grid-832216x按钮、输入组件等的默认高度。重要
grid-9362.2518x
grid-10402.520x按钮、输入组件等的相对大的高度。重要
grid-1148324x
grid-12563.528x
grid-1364432x
grid-14724.536x
grid-1580540x
grid-1696648x
grid-17112756x
grid-18128864x
grid-19144972x
grid-201601080x
grid-211761188x
grid-221921296x中台的 8 Column
grid-2320813104x
grid-2422414112x
grid-2524015120x
grid-2625616128x
grid-2727217136x
grid-2828818144x
grid-2930419152x
grid-3032020160x
grid-3133621168x
grid-3235222176x
grid-3336823184x
grid-3438424192x
grid-3440025200x中台的 4 Column
grid-3581651408x中台的 2 Column
grid-361648103824x中台的内容区域最大宽度

栅格布局​

栅格系统可以辅助设计师调整内容的位置以及对齐方式，可以使内容变得规律、有序。

24 等分栅格系统

适用于业务信息量较大，信息分组较多的页面。24 等分栅格系统更加灵活，更适合内容比较多样的复杂场景设计。

栅格尺寸​

栅格宽度​

根据给定的卡片栅格，动态的调整卡片栅格的宽度。

水槽宽度​

水槽宽度选定 8px 作为原子单位，根据业务可自定义水槽的值。比如 8px、16px、24px、32px、40px 等。

默认情况下，水槽宽度默认为 16px 。

栅格类型​

基础栅格​

  • 外间距 Margin：网格外边缘的边距始终是 16px，即卡片之间的间距。
  • 内间距 Padding：始终将元素放置在卡片内安全框内，元素距离卡片间距为 16px。

响应栅格​

根据背景的大小，对栅格自适应调整。

全宽栅格​

栅格的范围调整至页面的全宽。

栅格密度​

对于更小的内容，可以使用页面网格的最小单元进行设计的布局引导。

内容栅格​

  • 页面级栅格：把内容放置在页面背景上面，以整个页面背景的大小进行栅格。
  • 内容级栅格：把内容放置在卡片容器内，以卡片的大小进行栅格。

设计注意​

推荐
始终将内容放在安全框内。
慎用
不要将内容放在安全框外。