Layout 布局
通过基础的 24 分栏，迅速简便地创建布局。
基础布局
使用 yh-row 和 yh-col 组件，通过 span 属性即可自由地组合布局。
24
12
12
8
8
8
6
6
6
6
基础布局
分栏间隔
通过 gutter 属性指定分栏间隔，默认间隔为 0。
6
6
6
6
分栏间隔
混合布局
通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。
16
8
8
8
4
4
混合布局
分栏偏移
通过 offset 属性指定分栏偏移的栏数。
6
6 offset-6
6 offset-6
6 offset-6
分栏偏移
对齐方式
通过 justify 属性来控制行内元素的水平排列方式。
start
start
start
center
center
center
end
end
end
space-between
space-between
space-between
space-around
space-around
space-around
对齐方式
在 Nuxt 中使用
Row 和 Col 组件在 Nuxt 3/4 环境下表现卓越。布局系统的 HTML 结构在服务端即根据 span、gutter 等参数精准生成，确保了首屏布局的高稳定性和响应式一致性。
Nuxt Auto Import
SSR Optimized
Nuxt 中使用
SSR 注意事项：
- ✅ 24 分栏比例在服务端直接生成相应的 CSS 类名
- ✅ Gutter 间隔通过服务端的负 Margin 和内补丁 (Padding) 完美实现，首屏无对齐抖动
- ✅ 响应式配置 (xs, sm, md, lg, xl) 在服务端生成对应的媒体查询类
- ✅ 对齐 (justify) 和垂直对齐 (align) 在服务端生效
布局一致性
由于 Layout 组件完全基于 CSS (Flexbox) 样式控制，它天生具备 100% 的 SSR 一致性。在 Nuxt 页面中使用 Row/Col 几乎不需要担心任何水合冲突。
API
Row Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| gutter | 栅格间隔 | number | 0 |
| tag | 自定义元素标签 | string | 'div' |
| justify | 水平排列方式 | 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'start' |
| align | 垂直排列方式 | 'top' | 'middle' | 'bottom' | 'top' |
Col Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| span | 栅格占据的列数 | number | 24 |
| offset | 栅格左侧的间隔格数 | number | 0 |
| push | 栅格向右移动格数 | number | 0 |
| pull | 栅格向左移动格数 | number | 0 |
| xs | <768px 响应式栅格数或属性对象 | number | object | — |
| sm | ≥768px 响应式栅格数或属性对象 | number | object | — |
| md | ≥992px 响应式栅格数或属性对象 | number | object | — |
| lg | ≥1200px 响应式栅格数或属性对象 | number | object | — |
| xl | ≥1920px 响应式栅格数或属性对象 | number | object | — |
| tag | 自定义元素标签 | string | 'div' |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| — | 该组件暂无自定义事件 | — |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义内容 |
Expose
| 属性名 | 说明 | 类型 |
|---|---|---|
| — | 该组件暂无暴露属性 | — |
主题变量
Row/Col 组件主要基于 Flex 布局，目前暂无特定组件级全局 CSS 变量。
| 变量名 | 说明 | 默认值 |
|---|---|---|
| — | 暂无 | — |