Grid 栅格
24 等分的响应式栅格系统。<c-row> 是行容器，<c-col> 是列；列的 span 之和满 24 即填满一行。
何时使用
- 需要在多列之间对齐内容。
- 不同屏幕宽度下要切换列数。
基本使用
gutter 控制列与列的间距（px）。
不等分
不同 span 拼成一行，剩余的列若不足 24 不会拉伸。
偏移与对齐
offset 让列前置留白；justify / align 控制行内对齐方式。
响应式列数
xs / sm / md / lg / xl / xxl 按断点切换列数。
响应式间距
gutter 也支持 [h, v] 二元组或 { xs, sm, md, lg, xl } 对象。
列排序
order 改变列在视觉上的顺序，常用于响应式下"内容前置 / 侧栏后置"。
flex 简写
flex="1" / flex="0 0 200px" 让列脱离 24 栅格，按 flex 行为分配空间。
push / pull 移位
push 把列向右推，pull 把列向左拉。常用「侧栏代码先写 / 视觉右置」之类的反转布局。
嵌套行
Row 可以嵌套：外层切大块，内层在大块里再分。注意嵌套时内 Row 通常也加 gutter，与外层独立。
业务双栏布局
「侧栏 6 / 主内容 18」是后台管理最常见的双栏比例；配合响应式断点，移动端自动堆叠。
关闭换行
wrap="false" 强制 Row 单行展示，超出宽度的列会按 flex 缩压；常用于横向滚动条 / 关键指标条。
响应式对象配置
xs / sm / md / lg / xl / xxl 不仅可以传数字（span 简写），还可以传 { span, offset, order } 完整对象，按断点分别配置。
断点
| 断点 | 触发宽度（px） |
|---|---|
| xs | 0 |
| sm | 576 |
| md | 768 |
| lg | 992 |
| xl | 1200 |
| xxl | 1600 |
API
Row Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| justify | 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'start' | 水平对齐 |
| align | 'top' | 'middle' | 'bottom' | 'stretch' | 'top' | 垂直对齐 |
| gutter | number | [number, number] | Record<Breakpoint, number> | 0 | 栅格间距 |
| wrap | boolean | true | 自动换行 |
Col Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| span | number | — | 占据的栅格数 0–24 |
| order | number | — | 排序 |
| offset | number | — | 左偏移 |
| push | number | — | 向右推 |
| pull | number | — | 向左拉 |
| flex | number | string | — | flex 简写（脱离栅格按 flex 分配） |
| xs/sm/md/lg/xl/xxl | number | { span, offset, order, push, pull } | — | 响应式配置 |