Layout

Containers and spacing tokens are essential tools in Mesa's foundational layout system.

Breakpoint	Outer container margin	Inner container margin	Max number of columns
≥1720	144 px	300 px	8
≥1280	80 px	160 px	6
≥1024	60 px	60 px	4
≥576	60 px	60 px	3
<576	20 px	20 px	2

 

 

Token	rem	px
$spacing-01	0.125	2
$spacing-02	0.25	4
$spacing-03	0.5	8
$spacing-04	0.75	12
$spacing-05	1	16
$spacing-06	1.5	24
$spacing-07	2	32
$spacing-08	2.5	40
$spacing-09	3	48
$spacing-10	4	64
$spacing-11	5	80
$spacing-12	6	96
$spacing-13	7.5	120
$spacing-14	10	160