Layout
A 12-column grid, comfortable and compact density, page templates and content widths.
Pages lay out on a 12-column grid (DECISIONS.md #19). layout-grid sets the 12 columns and a column gap equal to the gutter; children take Tailwind col-span-*. Twelve divides into 2, 3, 4 and 6, which suits KPI rows. The page edge is px-margin and sections are separated by py-section. Gutter, margin and section spacing tighten under the compact density.
The grid, live
Rendered with the real utilities; resize the window or switch density in the top bar.
Recipe
<div className="layout-grid gap-y-gutter px-margin py-section">
<div className="col-span-3">{/* KPI */}</div>
<div className="col-span-3">{/* KPI */}</div>
<div className="col-span-3">{/* KPI */}</div>
<div className="col-span-3">{/* KPI */}</div>
<div className="col-span-8">{/* chart */}</div>
<div className="col-span-4">{/* list */}</div>
</div>layout-grid sets only the column gap. Add gap-y-gutter when items wrap onto several rows.
Grid tokens
| Token | Comfortable | Compact | Utility |
|---|---|---|---|
| layout.grid.columns Columns in the page grid. Divides into 2, 3, 4 and 6. | 12 | same | layout-grid |
| layout.gutter Gap between grid columns. | 24px | 16px | gap-gutter |
| layout.margin Page padding at the edge of the main area. | 32px | 24px | px-margin |
| layout.section Space between page sections. | 32px | 24px | py-section · gap-section |
The 1024 px floor
MACAW is desktop-first with a 1024 px minimum (DECISIONS.md #3). At 1024 px the SideNav takes 240 px and the main area keeps 784 px, enough for a 12-column grid with 4-column KPI cards. Below the floor, layouts are not designed; do not add breakpoints to rescue them. The md breakpoint is 1024 px, lg 1280 px and xl 1536 px, for adding columns on wider screens only.