Grid
Grid lays its rows out as a CSS grid. Each GridRow is a row, and its children spread across equal-width columns. The column count follows the densest row, so a two-item row and a three-item row align to one three-column track. Columns never shrink below minColumnWidth: on a narrow screen the grid drops columns and the cells wrap, down to one column on a phone.
Grid
Usage
A Grid's direct children must be GridRows; the blocks go inside the rows.
import { Grid, GridRow } from "@antelopejs/interface-dms/base/grid";
import { KpiCard } from "@antelopejs/interface-dms/base/kpi-card";
import { ChartCard } from "@antelopejs/interface-dms/base/chart-card";
import { ChartArea } from "@antelopejs/interface-dms/base/chart";
static dashboard = Grid({ minColumnWidth: "240px" })
.child(
"kpis",
GridRow()
.child("revenue", KpiCard({ title: "Revenue", fetchUrl: "/api/sales/revenue", periodScope: "sales" }))
.child("orders", KpiCard({ title: "Orders", fetchUrl: "/api/sales/orders", periodScope: "sales" })),
)
.child(
"charts",
GridRow().child(
"sales",
ChartCard({ title: "Sales", fetchUrl: "/api/sales/series", periodScope: "sales", chart: ChartArea() }),
{ colSpan: 2 },
),
);
Options
| Option | Type | Default | Description |
|---|---|---|---|
gapLayout | string | "1rem" | Gap between rows and columns, as a CSS length. |
minColumnWidthLayout | string | "240px" | Width below which a column is dropped, as a CSS length. |
GridRow() takes no options: it is a row marker. Its children accept one piece of child metadata, colSpan:
GridRow
| Child metadata | Type | Purpose |
|---|---|---|
colSpan | number | Columns the cell spans. Never more than the columns left at the current width. |
Recipes
Line cells up with a spacer
A Spacer in a row holds an empty cell, so the next cells line up with the columns above. Once the grid has dropped columns there is nothing to line up with, so the spacer hides instead of taking a row of its own.
Nest any block
Any block may sit in a row, including stacks, tabs or a nested grid. The responsive behavior is pure CSS (container queries on the grid's own width), so the server-rendered page is already laid out the way the browser keeps it.
Pitfalls
GridRow, never directly under Grid. The block catalog declares GridRow as the only child Grid accepts, so the page editor and the dms-ai assistant refuse anything else, and the grid only lays out its rows.- A
colSpan: 3cell on a phone takes the single column rather than pushing the row off screen. Do not rely on spans for meaning.