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 | 总列数 | string | 24 |
columns | 自动等分数(simple-grid,有值时忽略子项 span) | string | — |
gap | 间距 | string | 0 |
| 名称 | 说明 |
|---|---|
| 默认 | — |
oas-grid-item
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
offset | 左侧偏移列数 | string | 0 |
span | 跨列数 | string | 24 |
| 名称 | 说明 |
|---|---|
| 默认 | — |
oas-grid 渲染为 CSS Grid,子项为 24 份中的一份;oas-grid-item 通过 span 声明占位。设置 columns 后自动等分、忽略 span,普通元素子项也可直接放入。