Grid 栅格Grid · GridItem

等宽栅格。两种用法：按断点指定列数（columns），或者只说每项最小多宽、让它自己决定放几列（minItemWidth）。后者不依赖视口断点，放进任何宽度的容器里都成立。

示例

拖动浏览器宽度看列数变化。

给了 minItemWidth 就忽略 columns。拖动滑块改变最小宽度。

普通单元格不用包；需要跨列、跨行的用 GridItem。

窄屏整行，md 起跨 2 列

span="full"：始终整行

属性	类型	默认值	说明
`as`	`ElementType`	`'div'`	渲染成哪个元素。
`columns`	`Responsive<number>`	`1`	列数，等宽。
`minItemWidth`	`number \| string`	—	每项的最小宽度（数字按 px）。给了它就改为自动填充，忽略 columns。
`gap`	`Responsive<Space>`	`4`	行列间距。
`rowGap`	`Responsive<Space>`	—	行距，默认同 gap。
`align`	`Responsive<'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'>`	`'stretch'`	单元格内纵向对齐。
`justify`	`Responsive<'start' \| 'center' \| 'end' \| 'stretch'>`	`'stretch'`	单元格内横向对齐。
`padding`	`Responsive<Space>`	—	四边内边距（间距档位）。
`paddingX`	`Responsive<Space>`	—	左右内边距，优先于 padding。
`paddingY`	`Responsive<Space>`	—	上下内边距，优先于 padding。
`…rest`	`HTMLAttributes`	—	ref、className、style 和其余原生属性透传到根节点。

属性	类型	默认值	说明
`as`	`ElementType`	`'div'`	渲染成哪个元素。
`span`	`Responsive<number \| 'full'>`	—	横跨几列；full 为整行。
`rowSpan`	`number`	—	纵跨几行。
`…rest`	`HTMLAttributes`	—	ref、className、style 和其余原生属性透传到根节点。

Space 是间距档位：0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16，对应 --ok-s-*（档位 × 4px）。列用的是 minmax(0, 1fr)，内容再长也不会把列撑宽。