Grid

Arrange child widgets in an Astryx grid.

Astryx Props

JSON-safe Grid props forwarded to Astryx.

Supported Astryx props include:

columns (number or {minWidth: number, max?: number, repeat?: 'fill' or 'fit'}): Column configuration. Use a number for fixed columns (e.g. 'columns={3}'). Use an object for responsive columns: 'minWidth' sets the minimum column width in px, 'repeat' controls track behavior ('"fill"' preserves empty tracks for consistent widths, '"fit"' collapses empty tracks so items stretch; defaults to '"fill"'), and 'max' caps the maximum number of columns.
minChildWidth (number): Deprecated: use 'columns={{minWidth: 280}}' instead. Minimum item width in px; enables responsive auto-fit.
width (number or string): Container width.
height (number or string): Container height.
gap (SpacingStep): Spacing between all items.
rowGap (SpacingStep): Row spacing; overrides 'gap' for the row axis.
columnGap (SpacingStep): Column spacing; overrides 'gap' for the column axis.
align (GridAlignment): Vertical alignment of items.
justify (GridAlignment): Horizontal alignment of items.
children (ReactNode): Grid content.
xstyle (StyleXStyles): StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value: not an inline style object like style={{}}.

Props typed as React nodes, render functions, event handlers, refs, or StyleX styles are documented for Astryx parity but cannot be serialized directly from Python unless the wrapper adapts them.

See Astryx component docs: https://astryx.atmeta.com/components/Grid.

Functions

constructor__init__

(children=None, *, columns=2, gap=3, row_gap=None, column_gap=None, align=None, justify=None, width=None, height=None, **props) -> None

paramchildrenChildInput

= None

Child widget, sequence of widgets, or mapping of slot names to widgets.

paramcolumnsint | str | Mapping[str, Any]

= 2

Grid column definition. Pass an int for fixed columns, a {"minWidth": int, "repeat": "fit" | "fill", "max": int} mapping for responsive columns, or the equivalent CSS string "repeat(auto-fit, minmax(280px, 1fr))". Other CSS strings raise a TypeError because Astryx cannot render them.

paramgapint | float

= 3

Astryx spacing step between children.

paramrow_gapint | float | None

= None

Row spacing override.

paramcolumn_gapint | float | None

= None

Column spacing override.

paramalignstr | None

= None

Vertical item alignment.

paramjustifystr | None

= None

Horizontal item alignment.

paramwidthint | float | str | None

= None

Grid width.

paramheightint | float | str | None

= None

Grid height.

parampropsAny

= {}

Returns

None

Functions

On this page