---
url: /components/row.md
---
# Row 栅格行

24 栅格系统的行容器（flex + wrap 实现），与 Col 搭配使用。`gutter` 通过 provide 下发给 Col，由 Col 生成左右内边距，Row 自身以等值负外边距补偿，保证首尾列与页面边缘对齐；行默认渲染为 `div`（`tag` 可更换）。单一 Row 内所有列的 span 总和超过 24 时会自动换行。

## 基础用法

`span` 相加等于 24 即占满一行；列数与 span 可自由组合（3 x 8、2 x 12 等）。

## 栅格间隔

`gutter` 为列间距（px），Col 左右各取一半内边距，Row 用负外边距补偿；视觉上列内容之间的间隔即 gutter 值。

## 水平排列 justify

`justify` 控制主轴分布：start / end / center / space-around / space-between / space-evenly；列未占满 24 格时效果明显。

## 垂直对齐 align

`align` 控制交叉轴对齐：top / middle / bottom；同一行内列高度不一致时差异最明显。

## 组合场景：等距卡片列表

gutter 提供列间距，Col 内放置任意内容（这里用 EbCard），是最常见的后台仪表盘排版方式。

## API