# Layout and Grid

## Purpose

Grids, breakpoints and page structure.

## Decisions

### Layout

- **Breakpoints:** three. **Phone** under 640px, **tablet** from 640px to 1024px, **desktop** above 1024px.
- **Reading width:** body text lines are at most **720px** wide.
- **App content max width:** **1360px** (dashboards, tables, anything that is not body text). It takes up most of a 1920px screen including the 200px sidebar and page margins.
- **Grid:** no fixed column grid. Cards and items **flow into as many columns as fit** (a minimum card width). On top of that, a small set of **named layout presets** is supported: a **single central column**, an **even split**, a split **weighted to the left**, and a split **weighted to the right**.
- **Page margins** (outer padding): **16px on phone, 24px on tablet, 32px on desktop**.
- **Content next to the sidebar:** centred **in the space beside the sidebar**, with a maximum width, not centred on the whole window. The space is the area between the sidebar and the right edge.
- **Gap between cards:** **8px**.
- **Dialog widths:** **360 / 480 / 640px** (small, medium, large).
- **Density:** one density for everyone; there is no compact or comfortable setting.