Grid
grid栅格布局 · grid 原语 cols/gap + GridItem 跨列跨行(零依赖·RSC)
用法
基础用法
cols 传数字固定列数，gap 以 0.25rem 为单位控制行列间距。
<Grid cols={3} gap={3}>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</Grid>跨列
用 GridItem 的 colSpan 让单元格横跨多列。
<Grid cols={3} gap={3}>
<GridItem colSpan={2}>跨 2 列</GridItem>
<div>3</div>
<div>4</div>
<GridItem colSpan={2}>跨 2 列</GridItem>
</Grid>响应式列数
cols 传 {base,sm,md,lg}，按断点切换列数（走静态 Tailwind 类）。
<Grid cols={{ base: 1, sm: 2, md: 3 }} gap={3}>
{items.map((it) => <Card key={it.id} {...it} />)}
</Grid>行列间距分离
colGap / rowGap 可分别覆盖 gap，做出不同的横纵间距。
<Grid cols={3} colGap={4} rowGap={2}>
{/* 列间 1rem，行间 0.5rem */}
</Grid>何时用
需要二维行列对齐——固定列数、卡片网格、跨列跨行的局部布局时用 Grid，配 GridItem 控制单元的 colSpan/rowSpan。只需单轴线性排列（一行或一列）用 Stack 更轻；只想插入定向留白用 Spacer。
导入
import { Grid, GridItem } from "@hulianui/ui"Props
Grid
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| cols | number | ResponsiveCols | 1 | 列数。数字=固定列数（任意值，走 inline style）；{base,sm,md,lg,xl,2xl}=响应式（静态类） |
| rows | number | — | 行数（不填则按内容自动） |
| gap | number | 0 | 行列间距（× 0.25rem） |
| colGap | number | — | 列间距，覆盖 gap（× 0.25rem） |
| rowGap | number | — | 行间距，覆盖 gap（× 0.25rem） |
| inline | boolean | false | 用 inline-grid 而非 grid |
| as | ElementType | "div" | 渲染的元素标签 |
GridItem
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| colSpan | number | — | 跨列数 |
| rowSpan | number | — | 跨行数 |
| as | ElementType | "div" | 渲染的元素标签 |
两者其余 HTMLAttributes<HTMLElement> 属性透传。
Slots
Grid
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 子元素 |
GridItem
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 子元素 |
响应式档位铺满 Tailwind 断点：base / sm / md / lg / xl / 2xl。中后台宽屏（≥1280）恰恰最需要在 xl 档换布局，档位止于 lg 会逼消费方一半走 prop 一半走 className（hulianui/hulian#61）。例：cols={{ base: 1, xl: 4, "2xl": 6 }}。
禁忌 / 坑
暂无已知坑。cols 传数字走 inline style 支持任意列数；传 {base,sm,md,lg,xl,2xl} 才走静态响应式类。候选坑 body-grid-place-items-center / grid-card-button-tail-row / nested-collapsible-css-grid-rows 均针对各自具体布局场景，与本通用栅格原语无直接关系，已剔除。
as 是类型多态的
as="ul" 之后，事件与属性会跟着目标元素走：onSubmit 拿到 FormEvent<HTMLFormElement>、as="a" 能传 href。
早先 as 不参与推导，event.currentTarget 一律退化成 HTMLElement，表单专有 API 只能 as-cast——
而 cast 掉的正是类型安全本身（hulianui/hulian#62）。
相关
Playground
<Grid cols={3} gap={3}>
<div>1</div>
<GridItem colSpan={2}>跨 2 列</GridItem>
</Grid>