Grid Props

名称	类型	默认值	说明
columns	number | GridResponsiveColumns	-	列配置。传数字是固定列数，每一列等宽；传对象 { minWidth, max?, repeat? } 是响应式列，按可用宽度自动决定列数。缺失、为 0 或为负数时回退为单列。
width	number | string	-	容器宽度。数字按像素处理，字符串原样使用。
height	number | string	-	容器高度。数字按像素处理，字符串原样使用。
maxWidth	number | string	-	容器最大宽度。数字按像素处理，字符串原样使用。
minHeight	number | string	-	容器最小高度。数字按像素处理，字符串原样使用。
gap	SpacingStep	-	行列间距，使用 Astryx 的间距刻度。
rowGap	SpacingStep	-	行间距，覆盖同一方向上的 gap。
columnGap	SpacingStep	-	列间距，覆盖同一方向上的 gap。在响应式列计算列数上限时，它也优先于 gap。
rowHeight	number	-	隐式行高，单位为像素（grid-auto-rows）。配合 GridSpan 的 rows 使用。
align	GridAlignment	'stretch'	项目在行内的垂直对齐（align-items），可选 start、center、end、stretch。
justify	GridAlignment	'stretch'	项目在同一行内的水平对齐（justify-items），可选 start、center、end、stretch。

GridResponsiveColumns 的形状如下：

interface GridResponsiveColumns {
  minWidth: number
  max?: number
  repeat?: 'fill' | 'fit'
}

SpacingStep 支持以下值：

type SpacingStep = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10

Grid Span Props

名称	类型	默认值	说明
columns	number | 'full'	-	跨越的列数。'full' 渲染为 grid-column: 1 / -1，跨越整行，与列数无关。
rows	number	-	跨越的行数，渲染为 grid-row: span N。

插槽

名称	说明
default	要排布的项目。直接放子元素，或放 GridSpan 来改变其中一项的跨列、跨行行为。

GridSpan 同样只有一个默认插槽：

名称	说明
default	跨列项目的具体内容。

CSS 变量

Grid 在根元素上写入以下变量。它们是内部实现，但可以被主题或应用覆盖：

名称	说明
--astryx-grid-template-columns	计算出的列模板。写在变量上而不是内联的 grid-template-columns，因此媒体查询里的覆盖仍然有效。
--astryx-grid-auto-rows	rowHeight 转换出的隐式行高。
--astryx-grid-gap	gap 对应的间距令牌，行、列共用。
--astryx-grid-row-gap	rowGap 对应的间距令牌，覆盖 --astryx-grid-gap。
--astryx-grid-column-gap	columnGap 对应的间距令牌，覆盖 --astryx-grid-gap。
--astryx-grid-default-gap	主题令牌，在没有传入任何间距属性时作为默认间距。Neutral 主题取 --astryx-spacing-0，也就是不留间距。

原生属性

Grid 与 GridSpan 的根元素都是 <div>。

以下内容传入根元素：

• HTML 属性。
• aria-* 属性。
• data-* 属性。
• class。
• style。

class 会与组件自身的类名合并。style 与尺寸属性（width、height、maxWidth、minHeight）同时出现时，尺寸属性优先；GridSpan 的 columns、rows 同理。

Grid 还额外写入 data-columns（仅在 columns 为数字时）、data-gap、data-row-gap、data-column-gap、data-align、data-justify，供主题按属性选择。