Skip to content

Grid 栅格系统

基于 24 等分的响应式栅格,用于快速进行页面内容的行列排布。包含 UeRowUeCol 两个组件。

基础用法

栅格系统基于 24 等分,将内容区域按列进行划分,通过 span 指定占据列数。

span:12
span:12
span:8
span:8
span:8
6
6
6
6

列间距 gutter

通过 gutter 设置列与列之间的水平间距,单位为 px。

6
6
6
6

行间距 gap

通过 gap 设置行与行之间的垂直间距,单位为 px。

8
8
8
12
12

主轴对齐 justify

使用 justify 控制主轴(水平)的对齐方式:start / center / end / space-between / space-around / evenly

start
4
4
center
4
4
end
4
4
between
4
4
around
4
4
evenly
4
4

偏移 offset

通过 offset 设置列的左侧间隔列数,用于创建更灵活的布局。

6
6, offset:6
8, offset:4
8

Row 属性

  • tag: 自定义渲染标签,默认 div
  • gutter: 列间水平间距(px),默认 0
  • justify: 主轴对齐方式:start / center / end / space-between / space-around / evenly
  • gap: 行间垂直间距(px),默认 0

Col 属性

  • tag: 自定义渲染标签,默认 div
  • span: 占据列数(1-24)
  • offset: 左侧偏移列数(0-24)