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

packages/skin/ui/src/grid.ts

@@ -0,0 +1,21 @@
+import { h } from '@ui-arch/frame';
+import type { GridProps } from './types.js';
+
+// 间距档位 → 令牌（数字档位不入表，直接拼像素）
+const GUTTER: Record<string, string> = { sm: 'var(--ua-space-2)', md: 'var(--ua-space-3)', lg: 'var(--ua-space-4)' };
+// 交叉轴对齐 → grid align-items 取值
+const ALIGN: Record<string, string> = { start: 'start', center: 'center', end: 'end', stretch: 'stretch' };
+
+/*** 栅格容器：columns 固定列数、min 走 auto-fit 自适应列宽，gutter 统一列间距；列模板写进 --ua-grid-cols，窄屏由样式表降为单列 ***/
+export function grid(props: GridProps, ...children: unknown[]): HTMLElement {
+  const gutter = typeof props.gutter === 'number' ? `${props.gutter}px` : GUTTER[props.gutter ?? 'md']; // 数字档位按像素透传
+  const template = props.min
+    ? `repeat(auto-fit, minmax(${props.min}, 1fr))` // 自适应：列数由可用宽度决定
+    : `repeat(${props.columns ?? 3}, minmax(0, 1fr))`; // 固定列数：minmax(0,1fr) 防止长内容撑破
+  const el = h('div', {
+    class: ['ua-grid', props.dense ? 'is-dense' : '', props.align ? `is-align-${props.align}` : ''].filter(Boolean).join(' '),
+    style: `gap:${gutter};align-items:${ALIGN[props.align ?? 'stretch']};`,
+  }, ...children);
+  el.style.setProperty('--ua-grid-cols', template); // 列模板交给 CSS 变量，媒体查询可覆盖
+  return el;
+}