Grid 栅格
24 栅格布局系统，配合 oas-grid-item 划分列宽，支持间距、偏移与自定义总列数；设置 columns 后切换为自动等分布局（simple-grid）。
基础栅格
三等分
不等分
不等分
偏移
偏移 offset
自定义总列数
自定义 cols
自动列（simple-grid）
设置 columns 后按 repeat(n, 1fr) 自动等分，子项 span 被忽略（span 仅在无 columns 时生效），与 24 列栅格并存不冲突。
columns 自动等分
columns 忽略 span
响应式等分列数
columns 支持断点简写：基础值 + 空格分隔的若干 断点:值（断点协议与 span 一致，sm=640 / md=768 / lg=1024 / xl=1280，移动优先）。子项仍为等分自动布局、忽略 span。拖窄窗口可观察列数变化。
columns 断点：1 → sm:2 → md:3
<640px 每行 1 列；≥640px 每行 2 列；≥768px 每行 3 列。
最小子项宽度（自适应宫格）
min-child-width 指定每个子项的最小宽度（如 180px，纯数字按 px），网格以 auto-fit + minmax 依据容器可用宽度自动计算列数——子项免写断点即可流式重排。与 columns 并存时 columns 优先（min-child-width 被忽略）；该模式下子项 span / offset 同样不生效（自动排布）。
min-child-width 自适应宫格
拖窄/加宽容器观察列数自动增减，无需任何断点。
大间距
间距 gap
行列间距分离
gap 支持两值语法：空格或逗号分隔「行 列」（如 8 16 / 8,16），分别控制 row-gap 与 column-gap；单值仍为两轴同值（零回归）。row-gap / column-gap 属性可单独设置并覆盖 gap 对应轴。
gap 两值：行 8 列 24
gap 逗号双值 + row-gap/column-gap 分离属性
响应式断点
span / offset 支持断点简写：基础值 + 空格分隔的若干 断点:值（断点 sm=640 / md=768 / lg=1024 / xl=1280，移动优先）。拖窄窗口可观察列数变化。
span 断点：24 → md:12 → lg:8
<640px 每项占满一行；≥768px 两项一行；≥1024px 三等分。
offset 断点：0 → md:4
≥768px 右侧项从第 5 列起、占 4 列（offset 4 / span 4）。
自宽列
span="auto" 让子项按内容自然宽度排布（不展开占列），可与 offset 组合。
span=auto 自宽列
容器对齐
justify 控制行内轴（justify-items），align 控制块向轴（align-items）；合法值直写，非法回落 stretch + dev 告警。
justify 行内轴对齐
align 块向轴对齐（固定高度）
重排（order / push / pull）
order表达重排：不改 DOM/源码顺序（语义与读屏顺序保持），仅视觉排序变化push/pull（PRD P2）偏移式平移：在offset基础上把起始线右移 / 左移 N 列（净偏移 = push − pull，叠加 offset）；净偏移 ≤ 0 时回落自动放置
末位列提到首位（order）
push/pull 偏移平移
自定义顺序（order）
视觉顺序：D（0）→ B（1）→ C（2）→ A（3）。
折叠行（collapsed-rows）
collapsed-rows 指定折叠态显示的行数（按子项 span/offset 累计的行模型）：超出行数的子项隐藏，末尾出现「展开」尾格（占所在行剩余列）；点击展开后尾格转为「收起」可折回。折叠状态写回受控 collapsed 属性并派发 oas-collapse；columns / min-child-width 自动布局下不启用（行模型依赖 span/offset 语义）；行模型按 24 列累计，cols 非 24 时行数判定与实际布局有偏差（push/pull 不参与行模型），此组合慎用；总行数不超过 collapsed-rows 时不写 collapsed（无可折叠内容，全量可见且无尾格）。
collapsed-rows=1 查询条件折叠
默认只显示首行（条件 1~3），点尾格「展开」查看全部，「收起」折回。
子项 flex 通道
oas-grid-item 的 flex 属性内联直写 CSS flex 简写（grid 布局下按 CSS 规范不被消费、零干扰），供子项被用于 flex 容器等宿主场景透传。
API
oas-grid
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
align | 块向轴对齐（align-items）：start / center / end / stretch / baseline；非法值回落 stretch + dev 告警（同值去重） | string | — |
collapsed | 折叠行受控属性（collapsed-rows 配套；首帧缺省组件写入折叠态，宿主/尾格可切换） | — | — |
collapsed-rows | 折叠态显示行数：超出隐藏 + 展开/收起尾格（写回 collapsed 并派发 oas-collapse） | string | 1 |
cols | 总列数 | string | 24 |
column-gap | 列间距独立设置（同上） | string | — |
columns | 自动等分列数（simple-grid，有值时忽略子项 span）：支持断点简写（如 3 md:2 sm:1，断点 sm=640/md=768/lg=1024/xl=1280）；与 min-child-width 并存时优先 | string | — |
gap | 间距；单值两轴同值，两值空格分隔「行 列」（如 8 16 行 8 列 16）；三值以上非法静默回落 0 | string | 0 |
justify | 行内轴对齐（justify-items）：start / center / end / stretch；非法值回落 stretch + dev 告警（同值去重） | string | — |
min-child-width | 子项最小宽度（如 180px，纯数字按 px）：auto-fit + minmax 依容器宽度自动计算列数（子项免断点流式重排）；与 columns 并存时 columns 优先，该模式下子项 span/offset 不生效 | string | — |
row-gap | 行间距独立设置（覆盖 gap 对应轴，纯数字按 px） | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-collapse | 折叠行尾格切换时派发，detail: { collapsed } |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 栅格子项（oas-grid-item） |
CSS 变量
| CSS 变量 | 默认值 |
|---|---|
--oas-grid-columns | repeat(${base ?? 1}, 1fr) |
oas-grid-item
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
flex | 内联直写 CSS flex 简写（grid 下不参与布局，flex 容器场景透传） | string | — |
offset | 左侧偏移列数；支持断点简写（如 0 lg:4：基础值 + 空格分隔 断点:值，断点 sm=640 / md=768 / lg=1024 / xl=1280） | string | 0 |
order | 排序权重（数字，默认 0）；数值越大越靠后，用于列重排（偏移重排场景的等价表达） | string | 0 |
pull | 起始线左移 N 列（同上） | string | 0 |
push | 起始线右移 N 列（净偏移 push−pull 叠加 offset） | string | 0 |
span | 跨列数；支持 auto（内容自然宽）与断点简写（如 24 md:12：基础值 + 空格分隔 断点:值，断点 sm=640 / md=768 / lg=1024 / xl=1280） | string | 24 |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 栅格单元内容 |
CSS 变量
| CSS 变量 | 默认值 |
|---|---|
--oas-grid-item-column | ${baseColumn} |
oas-grid 渲染为 CSS Grid，子项为 24 份中的一份；oas-grid-item 通过 span 声明占位。设置 columns 后自动等分、忽略 span，普通元素子项也可直接放入。