Skip to main content
Grid is a CSS grid with a configurable number of columns (1-12). Children fill cells left-to-right, wrapping to new rows.

​
Basic Usage

​
Columns

The same set of children reflows as the column count changes.

​
Nested Content

Grids nest naturally with other containers:

​
API Reference

Grid Parameters

​
columns
int
default:"3"
Number of grid columns (1-12). Can be passed as a positional argument.
​
gap
int | tuple | None
default:"None"
Gap between children. An int maps to gap-{n}. A tuple (x, y) sets per-axis gaps; use None to skip an axis.
​
align
str | None
default:"None"
Cross-axis alignment: "start", "center", "end", "stretch", "baseline".
​
justify
str | None
default:"None"
Main-axis distribution: "start", "center", "end", "between", "around", "evenly", "stretch".
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Grid
{
  "type": "Grid",
  "children?": "[Component]",
  "columns?": 3,
  "gap?": "number | Action[]",
  "align?": "start | center | end | stretch | baseline",
  "justify?": "start | center | end | between | around | evenly | stretch",
  "cssClass?": "string"
}
For the complete protocol schema, see Grid.