Col
栅格列（24 分栏 span / offset / 响应式断点）。中文惯用名：栅格列（对齐 antd Grid.Col）。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.col |
| 名称 | Col |
| 二级分类 | 布局（layout） |
| 用途 | 栅格列（24 分栏 span / offset / 响应式断点） |
| 描述 | 中文惯用名：栅格列（对齐 antd Grid.Col）。 |
预览
静态结构：Col 渲染为 <div data-slot="col">（class min-w-0 防内容撑破栅格 + 响应式媒体查询类）；基础占位 inline style：span → width 百分比、offset → margin-left 百分比、order → order、pull → position relative + right、push → left、flex 数字展开为 0 0 Npx，span 0 为 display none；响应式档位（xs/sm/md/lg/xl/xxl，断点同 antd：xs <576，其余 min-width）number 简写 span 或对象 { span, offset, order, pull, push }，经客户端注入 style 标签（!important 覆盖基础内联样式）；在 Row 内读取 gutter 上下文对半拆分为 padding。
DSL 结构
{
"type": "Row",
"props": {
"gutter": 16
},
"children": [
{
"type": "Col",
"props": {
"span": 24,
"md": {
"span": 8,
"offset": 2
}
},
"children": [
{
"type": "Card",
"props": {
"title": "左侧内容"
},
"children": [
{
"type": "Text",
"props": {
"text": "移动端整行，md 起占 8 栏并偏移 2 栏"
}
}
]
}
]
},
{
"type": "Col",
"props": {
"span": 24,
"md": 14
},
"children": [
{
"type": "Card",
"props": {
"title": "右侧内容"
},
"children": [
{
"type": "Text",
"props": {
"text": "md 起占 14 栏"
}
}
]
}
]
}
]
}何时用
何时使用
- 24 分栏占位：span 按 24 分栏换算宽度，offset 平移起始栏位。
- 断点切换布局：xs~xxl 档位在断点处改变占位 / 偏移 / 顺序（响应式详情页、仪表盘）。
- 排列顺序调整：order / push / pull 在不改 DOM 顺序的前提下调整视觉位置。
何时不用
- 等宽均分：使用 Grid。
- 只是包一层容器加内边距：使用 Container / Space。
- 无栅格语义的独立区块：直接用块级元素或 Flex。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| span 占位 | 24 分栏换算宽度（span 6 = 25%） | 视觉稿栅格标注直译 |
| offset 偏移 | margin-left 平移起始栏位 | 表单列留白、不对称布局 |
| 响应式断点 | md / lg 档位切换占位与偏移 | 移动单列 → 桌面多列 |
| order / push / pull | 不改变 DOM 顺序调整视觉位置 | 移动端内容优先排列 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
span | number（0–24） | 24 | 栅格占位（24 分栏换算宽度百分比）；0 隐藏 |
offset | number | — | 左侧偏移栏数（margin-left 百分比） |
order | number | — | 排列顺序（CSS order） |
pull / push | number | — | 右移 / 左移栏数（position relative + right / left 百分比） |
flex | `string | number` | — |
xs / sm / md / lg / xl / xxl | `number | { span?, offset?, order?, pull?, push? }` | — |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式（与栅格样式合并，同键后者优先） |
使用规范
- 基础 span 给小屏值、md/lg 档位逐级放大（移动优先），不要在基础值上写死桌面布局。
- 同一行 Col 的 span 之和 ≤ 24（超出自动换行，别靠这个拼不规则布局）。
- 内容放 min-w-0 约束内：长文本 / 表格列内容需自行处理溢出，Col 已内置 min-w-0。
正例
- ✓ 详情页：Col span=24 md=12 双列表单，移动端自动叠单列。
- ✓ 列表页：Col span=24 md={span: 8, offset: 2} 让主内容区居中偏左。
反例
- ✕ 用 Col 表达等宽均分（应使用 Grid）。
- ✕ span 之和超 24 且依赖换行位置做布局（应拆多行 Row）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。