Col 栅格列
xy-col 负责描述一列占据多少栅格，以及它在不同断点下如何偏移、位移和隐藏。它通常和 xy-row 一起使用，但也可以单独承载栅格宽度规则。
基础列宽
先用 span 切出列宽，再决定卡片和表单块如何填充内容。
8
8
8
偏移与位移
offset 更适合做留白占位，push / pull 更适合调整视觉顺序。
span 8
offset 4
push 4
pull 4
响应式断点
xs / sm / md / lg / xl 支持直接传数字，也支持对象形式按断点配置 span / offset / pull / push。
xs 24 / sm 12 / lg 8
xs 24 / sm 12 / lg 8
sm 偏移 6 列
与 Row 配合使用
xy-col最常见的搭配是放在xy-row内，由 Row 统一下发gutter。- 如果外层没有
xy-row，Col 会退回到无间距模式，只保留列宽和断点规则。 - 当某个断点下的
span为0时，该列会在对应范围内隐藏。
API
Col Attributes
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
tag | 渲染的根标签 | string | 'div' |
span | 当前列占据的栅格数 | number | 24 |
offset | 左侧偏移的栅格数 | number | 0 |
pull | 向左位移的栅格数 | number | 0 |
push | 向右位移的栅格数 | number | 0 |
xs | < 768px 的响应式列配置 | ColSize | — |
sm | >= 768px 的响应式列配置 | ColSize | — |
md | >= 992px 的响应式列配置 | ColSize | — |
lg | >= 1200px 的响应式列配置 | ColSize | — |
xl | >= 1920px 的响应式列配置 | ColSize | — |
Col Slots
| 插槽 | 说明 |
|---|---|
default | 列内容，通常承载卡片、表单块或工具区域 |