Grid Props

Name	Type	Default	Description
columns	number | GridResponsiveColumns	-	Column configuration. A number is a fixed count of equal-width columns; an object { minWidth, max?, repeat? } creates responsive columns that reflow with the available width. A missing, zero, or negative value falls back to a single column.
width	number | string	-	Width of the container. Numbers are pixels, strings are used as they are.
height	number | string	-	Height of the container. Numbers are pixels, strings are used as they are.
maxWidth	number | string	-	Maximum width of the container. Numbers are pixels, strings are used as they are.
minHeight	number | string	-	Minimum height of the container. Numbers are pixels, strings are used as they are.
gap	SpacingStep	-	Spacing between items on both axes, using the Astryx spacing scale.
rowGap	SpacingStep	-	Spacing between rows; overrides gap on that axis.
columnGap	SpacingStep	-	Spacing between columns; overrides gap on that axis. It also takes precedence over gap when the responsive column count is capped.
rowHeight	number	-	Height in pixels of each implicit row (grid-auto-rows). Use it together with GridSpan's rows.
align	GridAlignment	'stretch'	Vertical alignment of items inside their row (align-items): start, center, end, or stretch.
justify	GridAlignment	'stretch'	Horizontal alignment of items within their row (justify-items): start, center, end, or stretch.

GridResponsiveColumns has this shape:

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

SpacingStep accepts these values:

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

Grid Span Props

Name	Type	Default	Description
columns	number | 'full'	-	Columns to span. 'full' renders grid-column: 1 / -1, which spans the row whatever the column count is.
rows	number	-	Rows to span, rendered as grid-row: span N.

Slots

Name	Description
default	The items to lay out. Place children directly, or wrap one in GridSpan to change how many columns or rows it occupies.

GridSpan has a single default slot as well:

Name	Description
default	The content of the spanning item.

CSS variables

Grid writes these variables to its root element. They are an implementation detail, but a theme or an application may override them:

Name	Description
--astryx-grid-template-columns	The computed column template. It lives in a variable rather than an inline grid-template-columns declaration, so a media query can still override it.
--astryx-grid-auto-rows	The implicit row height derived from rowHeight.
--astryx-grid-gap	The spacing token for gap, shared by both axes.
--astryx-grid-row-gap	The spacing token for rowGap, which overrides --astryx-grid-gap on the row axis.
--astryx-grid-column-gap	The spacing token for columnGap, which overrides --astryx-grid-gap on the column axis.
--astryx-grid-default-gap	A theme token used as the spacing when no gap prop is given. The neutral theme sets it to --astryx-spacing-0, which leaves no space between items.

Native attributes

Grid and GridSpan both render a <div> at the root.

The following go to the root element:

• HTML attributes.
• aria-* attributes.
• data-* attributes.
• class.
• style.

class is merged with the component's own classes. When style and the size props (width, height, maxWidth, minHeight) are both given, the props win; the same holds for GridSpan's columns and rows.

Grid also writes data-columns (only when columns is a number), data-gap, data-row-gap, data-column-gap, data-align, and data-justify, so a theme can target it by attribute.