Row
栅格行容器（gutter / 对齐 / 换行）。中文惯用名：栅格行（对齐 antd Grid.Row）。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.row |
| 名称 | Row |
| 二级分类 | 布局（layout） |
| 用途 | 栅格行容器（gutter / 对齐 / 换行） |
| 描述 | 中文惯用名：栅格行（对齐 antd Grid.Row）。 |
预览
静态结构：Row 渲染为 <div data-slot="row">（class flex，flexWrap 按 wrap 配置，justifyContent / alignItems 由 justify / align 映射）；gutter 经 React Context 传给子级 Col（Col 以 padding 对半拆分，Row 根节点负 margin 抵消首尾列留白）；Col 渲染为 <div data-slot="col">（基础占位经 inline style：span 换算 width 百分比、offset 换算 margin-left 百分比、order / pull / push / flex 直写，span 0 为 display:none），响应式档位（xs/sm/md/lg/xl/xxl）经客户端注入的 style 标签媒体查询类实现（!important 覆盖基础内联样式）。
DSL 结构
{
"type": "Row",
"props": {
"gutter": [
16,
12
],
"justify": "center",
"align": "middle"
},
"children": [
{
"type": "Col",
"props": {
"span": 6
},
"children": [
{
"type": "Card",
"props": {
"title": "左"
},
"children": [
{
"type": "Text",
"props": {
"text": "span 6"
}
}
]
}
]
},
{
"type": "Col",
"props": {
"span": 8
},
"children": [
{
"type": "Card",
"props": {
"title": "中"
},
"children": [
{
"type": "Text",
"props": {
"text": "span 8"
}
}
]
}
]
},
{
"type": "Col",
"props": {
"span": 8
},
"children": [
{
"type": "Card",
"props": {
"title": "右"
},
"children": [
{
"type": "Text",
"props": {
"text": "span 8"
}
}
]
}
]
}
]
}何时用
何时使用
- 需要 antd 式 24 分栏栅格：Col 按 span 占比分列，行容器统一 gutter / 对齐。
- 需要响应式断点：Col 的 xs~xxl 档位在断点处切换占位，Row 只做行容器。
- 需要与视觉稿的栅格标注一一对应：设计稿上的 8/8/8、6/12/6 分栏直接翻译为 span。
何时不用
- 等宽均分且列数简单（3 列指标卡墙）：使用 Grid（语义更窄、写法更短）。
- 一维排列与对齐（工具条两端对齐）：使用 Flex。
- 只做循环渲染的网格列表：使用 For（columns 模式，行作用域注入 ${row}）。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| gutter 栏间距 | Row gutter=[水平, 垂直]，Col 自动留白 | 卡片墙、表单多列，间距统一管理 |
| justify / align | center / space-between 等 6 档 + top/middle/bottom/stretch | 行内对齐与垂直对齐控制 |
| span / offset | Col 按 24 分栏占比 + 左侧偏移 | 视觉稿栅格标注直译 |
| 响应式断点 | md: { span: 8 } 在断点处切换占位 | 桌面多列、移动端单列 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
gutter | `number | [number, number]` | 0 |
justify | `'start' | 'end' | 'center' |
align | `'top' | 'middle' | 'bottom' |
wrap | boolean | true | 是否换行（flex-wrap） |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 一行一组 Col：Row 只做行容器，跨行内容拆多个 Row，不靠 wrap 硬撑不规则布局。
- gutter 用数组分别控制水平 / 垂直间距，比在 Col 上手写 margin 一致且好改。
- 响应式档位按「移动优先」声明：基础 span 给小屏值，md/lg 档位逐级放大。
正例
- ✓ 详情页双栏：Row gutter={16}，Col span=12 两列表单区。
- ✓ 指标区：Row justify="space-between"，四个 Col span=6 卡片。
反例
- ✕ 用 Row 表达等宽均分指标墙（应使用 Grid）。
- ✕ 在 Col 内部再手写负 margin 抵消 gutter（gutter 已内建首尾抵消）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。