10.03 · App Platform / 12-column grid

Twelve columns. Tabular gap. Auto-collapse.

The same grid every modern operations dashboard uses, scoped to .app-grid so it never collides with marketing layouts.

Span helpers

.app-col-1 through .app-col-12. Stack as many as fit; the grid wraps automatically. Demo below uses .demo-cell to visualize.

12
6
6
4
4
4
3
3
3
3
8 · chart
4 · recommendation

Common compositions

  • 4 KPI tiles, full-width row — four .app-col-3 cells. Auto-collapses to 2-up at 1080px, 1-up at 720px.
  • Chart + sidebar — .app-col-8 chart + .app-col-4 commentary or recommendation card.
  • Two-up content — .app-col-6 + .app-col-6. Form / preview, history / detail.
  • Three equal — .app-col-4 × 3. Method cards, channel summaries, status rollups.
  • Hero row + dense row — one .app-col-12 on top, four .app-col-3 beneath.

Rules

  • Use the 12-col grid inside .app-main only. Outside the app shell it's noise.
  • Gap is fixed at 16px. Don't override per row — density should feel consistent across the surface.
  • Cells should not set their own width. Always span via .app-col-N.
  • Tile content should never demand horizontal scroll. If a cell can't fit, drop to a wider span.

See it composed

The dashboard demo runs a 4×3 KPI row + an 8/4 chart row + a full-width table — all inside one .app-grid.

Open the dashboard demo ↗