Flex / Grid Layout

Two layout primitives: Flex for one-dimensional layouts (row or column) and Grid for two-dimensional column grids. Both render as plain <div> elements using design-token spacing.

Add via CLI

npx @a2ra/cli add layout

Flex row

Flex column

Grid

Example JSON

{
  "type": "Grid",
  "props": { "columns": 3, "gap": "md" },
  "children": [
    { "type": "Card", "children": [{ "type": "Text", "children": "Item 1" }] },
    { "type": "Card", "children": [{ "type": "Text", "children": "Item 2" }] },
    { "type": "Card", "children": [{ "type": "Text", "children": "Item 3" }] }
  ]
}

Flex props

Prop	Type	Description
direction	row default column row-reverse column-reverse	Flex direction
gap	none xs sm md default lg xl	Gap between children
align	start default center end stretch baseline	Cross-axis alignment
justify	start default center end between around evenly	Main-axis distribution
wrap	true false default	Allow children to wrap
children	node[]	Child nodes

Grid props

Prop	Type	Description
columns	number (1-12)	Number of equal-width columns. Default: 2
gap	none xs sm md default lg xl	Gap between cells
align	start default center end stretch	Row alignment
children	node[]	Child nodes

Notes

• Flex and Grid render as plain <div> elements with no semantic meaning.
• For form layouts, prefer Form over Flex — Form wires up React Aria validation context.
• Grid columns are always equal-width. For asymmetric layouts, nest multiple Flex nodes.