Foundations

Grid System

Trezor.io's column grids, margins, and gutters — defining how content is laid out across the website at every viewport size.

Overview

The Trezor.io grid is a fluid column system with fixed margins and gutters. Columns stretch to fill the available space — only margins and gutters are fixed values. Four grid styles are defined, one per breakpoint: Desktop, Laptop, Tablet, and Phone.

Not every element on the page needs to align strictly to the grid. What matters is that the main, largest, or most important elements — the anchor points of the layout — do. When key structural elements share the same grid, pages feel cohesive and clearly part of the same ecosystem, even if secondary content breaks out for visual interest.

The content container has a maximum width of 1840 px. At Desktop viewports (1920 px and wider) the 40 px margins still apply, but the content area never grows beyond 1840 px. Images and section backgrounds may bleed edge-to-edge, but text and UI content must stay within this boundary.

Grid styles

Breakpoint Viewport Columns Gutter Margin
Desktop 1920 px 12 20 40
Laptop 1280 px 12 16 32
Tablet 768 px 8 12 24
Phone 360 px 4 8 16

Grid anatomy

Each grid has three structural values: margin (space between the viewport edge and the content area), gutter (fixed space between columns), and columns (fluid — they fill whatever space remains after margins and gutters are applied).

Desktop — 12 columns, gutter 20, margin 40 · max-width 1840

40
20
20
20
20
20
20
20
20
20
20
20
40
max-width 1840 px

Laptop — 12 columns, gutter 16, margin 32

32
16
16
16
16
16
16
16
16
16
16
16
32

Tablet — 8 columns, gutter 12, margin 24

24
12
12
12
12
12
12
12
24

Phone — 4 columns, gutter 8, margin 16

16
8
8
8
16
Page tokens