Grid
24 栅格布局：Row 容器 + Col 列，严格对齐 Semi。默认 Row=cd-row（display:block + clearfix），Col 用 float:left + width% 布局；Row type="flex" 时切 flex 布局并激活 justify/align（cd-row-flex-{justify}/-{align}）。gutter 经 context 下发到 Col：Row 施加四向负 margin、Col 施加四向 padding 抵消，支持 [x,y] 与响应式对象（screens 状态机 + responsiveArray 从大到小降级）。Col 响应式为纯 CSS 类驱动（cd-col-{bp}-{span} 等，靠 @media 断点层叠）。
如何引入
import { Grid } from '@chenzy-design/svelte';基础栅格
24 列栅格系统，通过 span 指定列宽（float:left + width%），gutter 控制列间距。
行列间距
gutter 传 [水平, 垂直] 数组可同时设置行列间距；传响应式对象按断点降级取值。
gutter=[16, 24]（水平 + 垂直间距）
gutter={{ xs: 8, md: 16, xl: 32 }}（响应式间距，缩放窗口生效）
列偏移
通过 offset 向右偏移指定列数（margin-left），实现灵活的留白布局。
列位置微调
push / pull 相对移动列位置（left / right），可让 DOM 顺序与视觉顺序解耦。
Flex 水平排列
Row type="flex" 下 justify 控制水平排列：start/center/end/space-between/space-around。
justify="start"
justify="center"
justify="end"
justify="space-between"
justify="space-around"
Flex 垂直对齐
Row type="flex" 下 align 控制不等高列的垂直对齐：top/middle/bottom。
align="top"
align="middle"
align="bottom"
元素排序
Row type="flex" 下通过 order 改变列的视觉排列顺序，DOM 顺序不变。
响应式布局
通过 xs/sm/md/lg/xl/xxl 断点属性实现移动端到桌面端的自适应。
API 参考
Grid
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
type | 设为 'flex' 时用 flex 布局（cd-row-flex）并激活 justify/align；缺省为 cd-row（block + float 清除） | 'flex' | undefined |
gutter | number→水平间距；[x,y]→水平+垂直；按断点对象 { xs,sm,md,... } 时经 screens 状态机 + responsiveArray 从大到小降级取第一个命中且有值的断点（对齐 Semi getGutter）。Row 施加四向负 margin，Col 四向 padding 抵消 | number|[number,number]|Partial<Record<Breakpoint,number>> | 0 |
align | type="flex" 下生效：映射 align-items（cd-row-flex-top/middle/bottom） | 'top'|'middle'|'bottom' | undefined |
justify | type="flex" 下生效：映射 justify-content（cd-row-flex-start/center/end/space-between/space-around） | 'start'|'end'|'center'|'space-between'|'space-around' | 'start' |
class | — | string | '' |
style | 内联样式，追加在 gutter margin 之后（可覆盖） | string | '' |
span | 0-24，生成 cd-col-{span} 类（float:left + width%）；0 → cd-col-0 隐藏，未设为自动列 | number | undefined |
offset | cd-col-offset-{n} → margin-left 偏移列数 | number | 0 |
order | cd-col-order-{n} → order（type="flex" 下生效） | number | 0 |
push | cd-col-push-{n} → left 相对偏移 | number | 0 |
pull | cd-col-pull-{n} → right 相对偏移 | number | 0 |
xs|sm|md|lg|xl|xxl | 响应式断点覆盖：值为 number(span) 或子集对象，生成 cd-col-{bp}-{span} 等 CSS 类，靠 @media (min-width) 断点层叠（纯 CSS 驱动，不读 JS 断点） | number | { span?, offset?, order?, push?, pull? } | undefined |
class | — | string | '' |
style | 内联样式，追加在 gutter padding 之后（可覆盖） | string | '' |
Slots
| 名称 | 说明 |
|---|---|
children | Row 内放 Col；Col 内放任意内容 |
Accessibility
- 纯布局容器，不引入语义角色
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-width-grid-columns | 24 | 栅格宽度 |