Grid 栅格
Grid 提供接近成熟组件库的 24 栅格 API，用来组织页面骨架、卡片矩阵和左右混排布局。
视觉上使用 Rue 当前的轻量表面体系，能力覆盖 Row / Col、响应式断点、gutter、偏移、 顺序和 flex 混排。
24 ColumnsResponsiveOffset & OrderFlex Mix
# 基础 24 栅格
先用最直接的 span 心智搭建信息密度，再往上叠加响应式与语义卡片。
span 6
季度销售
span 6
新增用户
span 6
留存趋势
span 6
投放效率
span 8
三栏内容区
span 8
更适合导航+内容+侧栏
span 8
与 Card、Stat 组合最常用
# 响应式 gutter 与断点覆盖
gutter 可以按断点变化，Col 也可以在 xs~xxl 分别覆盖 span 和布局参数。
缩放窗口时，这组三列会从一列堆叠，逐步过渡到两列和三列，同时间距从紧凑切到宽松。
Hero 模块
xs=24, sm=12, lg=8
Insights
xs=24, sm=12, lg=8
Ops Panel
xs=24, lg=8
# 对齐、偏移与顺序
同一套 Grid 既能做规则矩阵，也能做营销位或时间线这种非对称排布。
Top
高度较小
Middle
通过 align=bottom 对齐底边
Bottom
适合比较型面板
offset 6
给主内容留白
order 3
视觉顺序后移
order 2
视觉顺序前置
# Flex 混排与不换行轨道
当 24 栅格不足以表达固定边栏 + 弹性主内容时，直接切到 flex 语义。
Fixed rail
280px 固定宽度，适合过滤器与导航
Fluid canvas
auto 吃掉剩余空间，适合主编辑区
Ops
固定操作条
No wrap
水平工具带
Keep inline
不允许自动换行
Sticky group
适合顶部命令条
# 仪表盘实战布局
Grid 不是只用来排彩色方块，更适合和 Card、Badge、Button 组合成真实页面骨架。
Growth cockpit
一块主画布里继续嵌套 Grid，拆出指标和趋势卡。
LiveQ2
GMV
¥ 4,230,000
Retention
71.4%
Campaign timeline
用整行展示跨模块趋势和长内容。
启动 6 个投放实验
完成落地页 AB 版本替换
同步 CRM 标签到投放人群
Ops queue
右侧侧栏保持更紧凑的信息节奏。
素材审批
还剩 2 项待确认
会员分层
等待 CRM 回传标签
报表快照
18:00 自动归档
# API
默认导出的 Grid 可直接当作 Row 使用，也可以通过 Grid.Row / Grid.Col 显式书写。
Grid / Grid.Row
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
gutter | 栅格间距，支持单值、[水平, 垂直]，以及按断点配置的对象写法 | number | string | ResponsiveValue | [ResponsiveValue, ResponsiveValue] | - |
justify | 主轴对齐方式，覆盖常见的 start / center / end / evenly 语义 | 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | start |
align | 交叉轴对齐方式 | 'top' | 'middle' | 'bottom' | 'stretch' | top |
wrap | 是否允许自动换行 | boolean | true |
className / style | 根节点样式扩展，使用 Rue 一贯的 class 直连能力 | string / Record<string, any> | - |
Grid.Col
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
span | 24 栅格占位数，0 表示隐藏当前列 | number | - |
offset | 在当前列左侧追加空白栅格 | number | 0 |
order | 通过 flex order 调整显示顺序 | number | - |
push / pull | 相对当前列原位向右或向左推移指定栅格数 | number | 0 |
flex | 支持 number、固定宽度字符串、auto 和 none，用于混合弹性布局 | number | string | - |
xs ~ xxl | 断点覆盖，支持直接传 span 数值，或传入包含 span / order / offset / push / pull / flex 的对象 | number | { span?: number; order?: number; offset?: number; push?: number; pull?: number; flex?: number | string } | - |
className / style | 列节点样式扩展 | string / Record<string, any> | - |