ts
| Guidance | Practices |
|---|---|
| Do | Use responsive columns for layouts that should adapt to screen size — `columns={{minWidth: 280}}`. |
| Do | Cap the column count with `max` to prevent rows from getting too wide on large screens. |
| Do | Use `repeat: 'fill'` (the default) for consistent item widths. Use `'fit'` when items should stretch to fill leftover space. |
| Don't | Write manual CSS grid — Grid handles spacing and responsive behavior for you. |
| Don't | Use `XDSHStack` with wrapping for grids — use Grid instead. |
| Prop | Type | Description |
|---|---|---|
columns | number | {minWidth: number, max?: number, repeat?: 'fill' | '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 | string | Container width. |
height | number | 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 (default: 'stretch') | Vertical alignment of items. |
justify | GridAlignment (default: 'stretch') | 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={{}}. |
| Prop | Type | Description |
|---|---|---|
columns | number | 'full' | Columns to span; use `'full'` to span the entire row. |
rows | number | Rows to span. |
children | ReactNode | Content. |