Skip to content

Grid 栅格

24 栅格布局系统,配合 oas-grid-item 划分列宽,支持间距、偏移与自定义总列数;设置 columns 后切换为自动等分布局(simple-grid)。

基础栅格

三等分

span 8
span 8
span 8

不等分

不等分

span 6
span 12
span 6

偏移

偏移 offset

span 12
span 8 offset 4
span 4 offset 6

自定义总列数

自定义 cols

span 6 / 12 列
span 6 / 12 列
span 4
span 8

自动列(simple-grid)

设置 columns 后按 repeat(n, 1fr) 自动等分,子项 span 被忽略(span 仅在无 columns 时生效),与 24 列栅格并存不冲突。

columns 自动等分

1
2
3
4
5
6

columns 忽略 span

span 8 被忽略
span 24 被忽略
span 8 被忽略
span 24 被忽略

大间距

间距 gap

span 8
span 8
span 8

API

oas-grid

属性说明类型默认值
cols总列数string24
columns自动等分数(simple-grid,有值时忽略子项 span)string
gap间距string0
名称说明
默认

oas-grid-item

属性说明类型默认值
offset左侧偏移列数string0
span跨列数string24
名称说明
默认

oas-grid 渲染为 CSS Grid,子项为 24 份中的一份;oas-grid-item 通过 span 声明占位。设置 columns 后自动等分、忽略 span,普通元素子项也可直接放入。