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;
+}

packages/skin/ui/src/index.ts

@@ -61,3 +61,4 @@ export { anchor } from './anchor.js';
 export { popconfirm } from './popconfirm.js';
 export { calendar } from './calendar.js';
 export { typography } from './typography.js';
+export { grid } from './grid.js';

packages/skin/ui/src/types.ts

@@ -757,4 +757,13 @@ export interface TypographyProps {
   copyable?: boolean;                     // 附复制按钮：点后写剪贴板并短暂回显结果；缺省 false
 }
 
+/*** 栅格容器入参 ***/
+export interface GridProps {
+  columns?: number;                 // 固定列数；缺省 3（窄屏一律降为单列）
+  min?: string;                     // 自适应最小列宽（如 '220px'）：给了就按 auto-fit 铺列，忽略 columns
+  gutter?: SpaceSize;               // 列间距：sm/md/lg 走令牌，数字按像素；缺省 md
+  align?: 'start' | 'center' | 'end' | 'stretch'; // 交叉轴对齐（行高不一致时定子项位置）；缺省 stretch
+  dense?: boolean;                  // 紧凑填充：小项回填空洞（瀑布式排布）；缺省 false
+}
+
 export type { ColumnDef, RowKey }; // 再导出常用内核类型，方便调用方