Grid 网格布局
基于 CSS Grid 的网格布局组件，相比 Row/Col 的 Flex 布局，提供更强大的二维布局能力。
基础用法
设置 cols 属性定义列数，gap 属性设置间距。
1
2
3
基础用法
跨列
使用 span 属性设置 GridItem 跨越的列数。
span=2
span=3
span=1
span=6 (整行)
跨列
偏移
使用 offset 属性设置 GridItem 的列偏移量。
A
B (offset=2)
偏移
不同间距
gap 属性支持传入数组 [行间距, 列间距] 来分别设置行列间距。
1
2
3
4
5
6
7
8
不同间距
自定义列模板
cols 属性传入字符串时，将直接作为 CSS grid-template-columns 的值，实现灵活布局。
200px
1fr
200px
自定义列模板
Suffix 后缀元素
设置 suffix 属性可将 GridItem 固定到行末。
内容
Suffix
Suffix 后缀元素
在 Nuxt 中使用
Grid 组件完全支持 Nuxt 3/4 的 SSR 渲染。以下示例展示了在 Nuxt 中使用 Grid 布局构建商品列表页面，结合 useFetch 异步加载数据。
商品列表
商品 1
¥ 99.9商品 2
¥ 199.8商品 3
¥ 299.7商品 4
¥ 399.6Nuxt 中使用
SSR 注意事项：
- ✅ 所有 Props 和样式完全支持
- ✅ CSS Grid 布局正确渲染
- ✅ 插槽内容完整渲染
- ✅
cols字符串模板模式正常输出 - ✅
span、offset、suffix等定位属性完美工作
SSR 安全性
Grid 组件已通过完整的 SSR 测试，确保服务端和客户端渲染完全一致，Hydration 无错误。
API
Grid Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| cols | 列数或 CSS 列模板 | number | string | 12 |
| gap | 间距 | number | string | [number | string, number | string] | 0 |
| colGap | 列间距（优先于 gap） | number | string | 0 |
| rowGap | 行间距（优先于 gap） | number | string | 0 |
| collapsed | 是否折叠 | boolean | false |
| collapsedRows | 折叠后显示行数 | number | 1 |
| justifyItems | 水平对齐 | 'start' | 'end' | 'center' | 'stretch' | — |
| alignItems | 垂直对齐 | 'start' | 'end' | 'center' | 'stretch' | — |
| themeOverrides | 主题覆盖变量 | ComponentThemeVars | — |
GridItem Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| span | 跨列数 | number | 1 |
| offset | 偏移列数 | number | 0 |
| suffix | 是否为后缀元素（固定行末） | boolean | false |
| themeOverrides | 主题覆盖变量 | ComponentThemeVars | — |
Slots
Grid 和 GridItem 均支持 default 默认插槽。
主题变量
Grid 组件支持通过覆盖以下 CSS 变量来自定义局部样式：
Grid 变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-grid-gap | 网格间距 | 0 |
--yh-grid-col-gap | 网格列间距 | var(--yh-grid-gap, 0) |
--yh-grid-row-gap | 网格行间距 | var(--yh-grid-gap, 0) |
GridItem 变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-grid-item-padding | 项目内边距 | 0 |