Grid and layout
Column grids, breakpoints, gutter and margin tokens for Blazor web, .NET MAUI and EPR application layouts.
Breakpoint system
Five breakpoints define how layouts adapt. All five exist as tokens — the value shown beside each token name is read from the built tokens at build time, so this table cannot drift from what ships.
| Breakpoint | Width range | Columns | Gutter | Margin | Token | Platform |
|---|---|---|---|---|---|---|
| Mobile | 0 – 767px | 4 | 16px | 16px | --breakpoint-mobile-max = 767px | MAUI mobile · web mobile |
| Tablet | 768 – 1023px | 8 | 24px | 32px | --breakpoint-tablet-min = 768px | MAUI tablet · web tablet |
| Desktop | 1024 – 1279px | 12 | 24px | 40px | --breakpoint-desktop-min = 1024px | Blazor web |
| Large | 1280 – 1439px | 12 | 24px | 64px | --breakpoint-large-min = 1280px | Blazor web (standard) |
| XLarge | 1440px + | 12 | 32px | 80px | --breakpoint-xlarge-min = 1440px | Blazor web (wide) |
--breakpoint-desktop-min also switches the typography scale from the
mobile to the desktop values. Changing it moves both.
Grid types
Mobile and tablet grids are fluid — columns scale to fill. Desktop is 12-column with fixed margins.
Mobile
4-Column Fluid
0 – 767px
Tablet
8-Column Fluid
768 – 1023px
Desktop
12-Column Fixed
1024px +
EPR application grid
When the EPR navigation sidebar is visible the content zone is reduced. Design against the content zone, not the full frame width.
| Context | Frame | Sidebar | Content zone | Columns | Gutter | Margin |
|---|---|---|---|---|---|---|
| Full width (no sidebar) | 1440px | — | 1440px | 12 | 32px | 80px |
| EPR with sidebar | 1440px | 248px | 1192px | 12 | 24px | 32px |
| EPR with sidebar | 1280px | 248px | 1032px | 12 | 20px | 24px |
Sidebar is 248px, matching the Navigation component and the Figma
grid frame. The component had shipped at 220px, leaving these content zones 28px out against it;
both were reconciled to 248px together in 2026-08.
Spacing token reference
Gutter and margin values map directly to the Space scale in Primitives.
| Usage | Value | Primitive | Semantic |
|---|---|---|---|
| Mobile — gutter & margin | 16px | Space/4 | Spacing/Layout/XS |
| Tablet — gutter | 24px | Space/6 | Spacing/Layout/SM |
| Tablet — margin | 32px | Space/8 | Spacing/Layout/MD |
| Desktop — gutter | 24px | Space/6 | Spacing/Layout/SM |
| Desktop — margin (1024px) | 40px | Space/10 | — |
| Desktop — margin (1280px) | 64px | Space/16 | Spacing/Layout/Page |
| Desktop — margin (1440px) | 80px | Space/20 | — |
The 40px and 80px desktop margins have no semantic layout token. Use the primitive until one exists.
Platform guidance
Web — Blazor
Targets Desktop and Tablet. The sidebar reduces content width — design in the content zone.
- Desktop XLarge (1440px) — 12 col, 32px gutter, 80px margin
- Desktop Large (1280px) — 12 col, 24px gutter, 64px margin
- Desktop (1024px) — 12 col, 24px gutter, 40px margin
- Tablet (768px) — 8 col, 24px gutter, 32px margin
.NET MAUI
Mobile only — phone and tablet. MAUI has no desktop target in this system; Blazor web covers Desktop/Large/XLarge. Drive layout switches with breakpoint token values, not hardcoded numbers.
- Phone (< 768px) — 4 col, 16px gutter, 16px margin
- Tablet (768–1023px) — 8 col, 24px gutter, 32px margin
- Use
OnIdiom/AdaptiveTriggerwithBreakpoint/*tokens