n-row 栅格行 / n-col 栅格列
24 分栏栅格布局：n-row 是水平容器（排列、对齐、换行、列间距），n-col 声明每块内容占几栏（span）与左侧空几栏（offset）。适用于表单两列、卡片等分、主次内容混排等一行并排多块内容的场景。
- 列间距 gutter（水平）与行间距 gutterY（垂直）都用「行负 margin + 列内边距」实现（App 端不支持 CSS gap）：行两侧/上下负 margin 抵消首尾列的内边距，列内容与容器边缘对齐，相邻列间距恰为 gutter；行边缘会向外扩张半行距（行自身设背景色时背景画入扩张区）
- 半间距经 CSS 变量 --n-row-gutter / --n-row-gutter-y 沿 DOM 树下发（与主题系统同机制，变量即使为 0 也显式写入以阻断外层继承），n-col 零 JS 通信即可取到；嵌套 n-row 就近覆盖，内外层间距互不干扰
- 列宽 = span / 24，行内百分比计算（全端可靠，不依赖宽度类表）；同行栏数总和超过 24 时 wrap（默认）自动换行
- 响应式断点（xs/sm/md/lg/xl）由 n-col 读窗口宽度自行分档（媒体查询在 App 端不可用，JS 驱动替代），窗口尺寸变化（旋转屏幕、Web 拖宽）自动重算；断点只覆盖 span，offset/push/pull 各档一致
- push/pull 相对定位平移（占位不变，可与相邻列视觉换位）
- 越界值不校验：span 超出 1-24 按公式自然计算（如 25 → 列宽 104%），gutter 负值等效 0——显式行为优于静默钳制
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
n-row 属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| gutter | 列间距，px（行两侧负 margin 抵消首尾列内边距，列内容与容器边缘对齐） | Number | 0 | - |
| gutter-y | 行间距，px（换行后行与行的垂直间距；行上下边缘向外扩张半行距，与相邻内容的间距需大于半行距，行自身设背景色时背景画入扩张区） | Number | 0 | - |
| justify | 主轴排列 | String | start | start / end / center / between / around |
| align | 交叉轴对齐（列高不同时是否拉齐；stretch = 拉伸等高） | String | stretch | top / middle / bottom / stretch |
| wrap | 子项总栏数超过 24 时是否换行（nowrap 时溢出内容被裁切，慎用） | Boolean | true | - |
| custom-class | 根节点自定义类（类需定义在组件样式表内） | String | "" | - |
| custom-style | 根节点行内样式 | String | "" | 与 css 相同 |
n-row 事件
| 事件名 | 说明 |
|---|---|
| click | 点击行时触发 |
n-row 插槽
| 插槽名 | 说明 |
|---|---|
| default | 行内容（通常是一组 n-col；放普通元素时 n-row 退化为普通换行 flex 行） |
n-col 属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| span | 栅格占据的栏数（24 = 整行；同行总和超过 24 时由父行 wrap 决定换行或裁切） | Number | 24 | 1 - 24 |
| offset | 栅格左侧空出的栏数（不等距排布、行内右移） | Number | 0 | 0 - 24 |
| push | 向右平移的栏数（相对定位，占位不变，可与相邻列视觉换位） | Number | 0 | 0 - 24 |
| pull | 向左平移的栏数（相对定位，占位不变，可与相邻列视觉换位） | Number | 0 | 0 - 24 |
| xs | 窗口宽 <768px 时占据的栏数（0 = 不设，回退 span） | Number | 0 | 0 - 24 |
| sm | 窗口宽 ≥768px 时占据的栏数（0 = 不设，回退 xs，再回退 span） | Number | 0 | 0 - 24 |
| md | 窗口宽 ≥992px 时占据的栏数（0 = 不设，回退 sm，逐级回退到 span） | Number | 0 | 0 - 24 |
| lg | 窗口宽 ≥1200px 时占据的栏数（0 = 不设，回退 md，逐级回退到 span） | Number | 0 | 0 - 24 |
| xl | 窗口宽 ≥1920px 时占据的栏数（0 = 不设，回退 lg，逐级回退到 span；Web 端大屏） | Number | 0 | 0 - 24 |
| custom-class | 根节点自定义类（类需定义在组件样式表内） | String | "" | - |
| custom-style | 根节点行内样式 | String | "" | 与 css 相同 |
n-col 事件
| 事件名 | 说明 |
|---|---|
| click | 点击列时触发（事件会继续冒泡到父 n-row 的 click） |
n-col 插槽
| 插槽名 | 说明 |
|---|---|
| default | 列内容（沿列纵向排布） |