iter(g130): 新增栅格容器 grid

llms-full.txt

@@ -1,6 +1,6 @@
 # @ui-arch 组件库 Agent 文档（无图形版）
 
-> 自动生成于 2026-10-26T07:17:51.824Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
+> 自动生成于 2026-10-26T07:19:51.268Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
 
 ## 快速上手
@@ -1702,6 +1702,33 @@ typography({ variant: 'title', level: 2, content: '部署说明' }); typography(
 
 现场演示：apps/docs/demo.html#sec-typography
 
+### grid — 栅格容器 Grid
+
+参数：
+
+- columns（默认 3）：number —— 固定列数（按等宽铺开）；窄屏（≤640px）由样式表统一降为单列
+- min：string —— 自适应最小列宽（如 '220px'）：给了就按 auto-fit 铺列，列数随可用宽度自然增减，此时忽略 columns
+- gutter（默认 md）：SpaceSize —— 列间距：sm/md/lg 走令牌，数字按像素
+- align（默认 stretch）：'start' | 'center' | 'end' | 'stretch' —— 交叉轴对齐：同行子项高度不一时决定各自贴哪边或拉满
+- dense（默认 false）：boolean —— 紧凑填充：小项回填前面留下的空洞（瀑布式排布）
+
+示例：
+
+```
+grid({ columns: 3, gutter: 'md' }, card({ title: '实例数' }, statistic({ value: total })), card({ title: '错误率' }, statistic({ value: errRate }))); grid({ min: '240px', align: 'start' }, ...items)
+```
+
+手把手：
+
+1. 页面骨架用 grid({ columns: n }) 铺等宽卡片：子项宽度由列模板算，别在子项上写 width，窄屏会自动变成单列
+2. 卡片宽度要求「不窄于 X」时用 min（如 '240px'）：auto-fit 会按可用宽度决定列数，比手写断点稳，此时不要再传 columns
+3. 列间距统一走 gutter（sm/md/lg 令牌或像素），不要在子项上写 margin——相邻 margin 会叠加成双倍间距
+4. 同行卡片高度参差时：要等高（默认 stretch），要各自顶端对齐传 align: 'start'
+5. 子项必须是单个元素（card / div / 自定义块），grid 只负责排布且已对子项设 min-width: 0，长文本不会撑破列宽
+6. 只要横向一排展示且元素不等宽，用 space 更轻；grid 面向二维对齐
+
+现场演示：apps/docs/demo.html#sec-grid
+
 API 速览：
 
 - button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用；type 缺省 button（表单内不隐式提交）
@@ -1767,6 +1794,7 @@ API 速览：
 - popconfirm(props, trigger)：二次确认气泡，挂在任意触发器上，就地确认危险操作；确定后先收起再回调，取消 / 点外部 / Esc 走 onCancel，展开即聚焦「取消」
 - calendar(props)：月历，整月网格内嵌页面（排期 / 值班 / 日程），每日可带 marker 标记文案，方向键漫游 + Enter 选中，翻月走 onMonthChange
 - typography(props)：排版文本，variant 决定语义（标题出 h1-h5 / 段落出 p / 行内出 span），支持语义色、装饰位、对齐、多行截断与复制按钮
+- grid(props, ...children)：栅格容器，columns 固定列数或 min 走 auto-fit 自适应列宽，gutter 统一列间距，窄屏自动降为单列
 
 一行用法：