Skip to main content
Grid is a CSS grid with configurable columns. Pass an integer for equal-width columns (1-12), or a list for custom widths like [1, 3] or [1, "auto", 1]. Children fill cells left-to-right, wrapping to new rows.

​
Basic Usage

​
Columns

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

​
Custom Column Widths

Pass a list to columns for unequal-width columns. Integers become fractional units (1 → 1fr, 2 → 2fr) and strings pass through as CSS values ("auto", "200px"). The "auto" keyword sizes a column to its content, which works well for separators or fixed-width controls between fluid areas.

​
Spanning Cells

Wrap a child in GridItem to make it span multiple columns or rows. Children without a GridItem wrapper take a single cell. The grid still auto-flows, so items reflow responsively as columns change. row_span works the same way for vertical spanning. This is useful for tall cards alongside shorter ones in dashboard-style layouts.
For explicit row/column placement (pinning items to exact coordinates), use Dashboard instead. GridItem controls size; DashboardItem controls size and position.

​
Auto-fill Columns

Set min_column_width instead of columns to let CSS Grid automatically fit as many columns as possible, each at least the given width. Drag the handle to see the grid reflow.

​
Responsive Columns

Pass a dictionary of breakpoints to columns for precise control at specific viewport widths. The default key sets the base, and Tailwind breakpoints (sm, md, lg, xl, 2xl) override it progressively. 
Grid(columns={"default": 1, "md": 2, "lg": 3})
See Responsive Layout Props for responsive gap, css_class, and the Responsive helper.

​
Nested Content

Grids nest naturally with other containers:

​
API Reference

Grid Parameters

​
columns
int | list | dict | Responsive
default:"3"
Number of grid columns (1-12), or a list of column widths. Can be passed as a positional argument. In a list, integers become fractional units (1 → 1fr) and strings pass through ("auto", "200px"). Pass a dict or Responsive() for breakpoint-aware column counts. Mutually exclusive with min_column_width.
​
min_column_width
str | None
default:"None"
Minimum column width for auto-fill responsive grids (e.g. "16rem"). CSS Grid fits as many columns as possible at this minimum width. Mutually exclusive with columns.
​
gap
int | tuple | Responsive | 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. A Responsive() sets different gaps at different breakpoints.
​
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 | Responsive | None
default:"None"
Additional Tailwind CSS classes. A Responsive() compiles breakpoint-prefixed classes.

GridItem Parameters

​
col_span
int
default:"1"
Number of columns to span.
​
row_span
int
default:"1"
Number of rows to span.
​
css_class
str | Responsive | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Grid
{
  "type": "Grid",
  "children?": "[Component]",
  "let?": "object",
  "columns?": "number | Action[] | object",
  "columnTemplate?": "string",
  "minColumnWidth?": "string",
  "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.