Grid 栅格系统
基于 24 等分的响应式栅格,用于快速进行页面内容的行列排布。包含 UeRow
与 UeCol
两个组件。
基础用法
栅格系统基于 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)