Skip to main content
Prefab has two grid components, and the choice between them comes down to whether you want to control placement:
  • Grid is for uniform layouts. You set a column count and children flow in left-to-right, wrapping to new rows automatically. Every child gets the same column width. Use Grid when you have a collection of same-shaped items — a card grid, a gallery, a set of form fields.
  • Dashboard is for composed layouts where items have different sizes and specific positions. A chart might span 8 of 12 columns while stat cards stack in the remaining 4. A table might stretch the full width below. You place each item at exact grid coordinates and control how many columns and rows it spans.
Dashboard works like pinning widgets to a canvas. You define the grid with a columns count and a row_height, then wrap each piece of content in a DashboardItem that declares its position (col, row) and size (col_span, row_span). Coordinates are 1-indexed, matching CSS Grid conventions.

​
Basic Usage

A Dashboard needs a columns count and a row_height (in pixels by default). Each child DashboardItem declares where it sits on the grid. Here, a 4-column grid places four blocks: A spans 2 columns across the top-left, B fills the top-right, C occupies a single cell on the second row, and D stretches across the remaining 3 columns.

​
Dashboard Layout

A common dashboard pattern uses a 12-column grid (like Bootstrap’s grid system) to mix wide and narrow elements. The trick is planning your rows: the chart card starts at column 1 and spans 8 of the 12 columns, while three stat cards stack in the remaining 4 columns (columns 9-12). Each stat card takes one row; the chart spans all three rows so it lines up with them. A full-width table sits below in row 4. To make children fill their grid cells, use css_class="h-full" on the content inside each DashboardItem.

​
Row Height

By default, every row in the grid is the same height — set by row_height in pixels. An item with row_span=2 gets twice that height (plus one gap). The tabs below show the same layout at 80px and 150px row heights: same positions, different vertical scale.

​
Content-sized rows

Pass a string instead of an integer for CSS values. row_height="auto" makes each row size to its tallest item — so a row with a paragraph of text will be taller than a row with a single line. This is useful when your dashboard items have varying content and you want the grid to adapt rather than forcing fixed cells. You can also use row_height="minmax(80px, auto)" to set a minimum height while still allowing rows to expand for taller content.

​
Layering

When items overlap on the grid (their column/row ranges intersect), they stack visually. By default, later items render on top of earlier ones. Use z_index to control the stacking order explicitly — higher values render on top.

​
API Reference

Dashboard Parameters

​
columns
int
default:"12"
Number of grid columns.
​
row_height
int | str
default:"120"
Height of each auto-generated row. Integer for pixels, string for any CSS value (e.g. "auto", "minmax(100px, auto)").
​
rows
int | None
default:"None"
Fixed number of rows. When set, uses grid-template-rows instead of grid-auto-rows. Omit for auto-expanding rows.
​
gap
int | tuple | Responsive | None
default:"None"
Gap between items. An int maps to gap-{n}. A tuple (x, y) sets per-axis gaps.
​
css_class
str | Responsive | None
default:"None"
Additional Tailwind CSS classes.

DashboardItem Parameters

​
col
int
default:"1"
Starting column (1-indexed).
​
row
int
default:"1"
Starting row (1-indexed).
​
col_span
int
default:"1"
Number of columns to span.
​
row_span
int
default:"1"
Number of rows to span.
​
z_index
int | None
default:"None"
CSS z-index for layering overlapping items.
​
css_class
str | Responsive | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Dashboard
{
  "type": "Dashboard",
  "children?": "[Component]",
  "let?": "object",
  "columns?": 12,
  "rowHeight?": "number | string",
  "rows?": "number",
  "gap?": "number | Action[]",
  "cssClass?": "string"
}
DashboardItem
{
  "type": "DashboardItem",
  "children?": "[Component]",
  "let?": "object",
  "col?": 1,
  "row?": 1,
  "colSpan?": 1,
  "rowSpan?": 1,
  "zIndex?": "number",
  "cssClass?": "string"
}
For the complete protocol schema, see Dashboard, DashboardItem.