Grid / Spacing Size values for controlling dimension, margin, border, padding, gaps, etc.
Base
Most unit/values are calculated from this single value so we can very easily adust scale.
| Unit / Value | Example |
|---|---|
|
.25rem
|
|
Scale
Scaled values calculated from the base REM unit.
| Unit / Value | Example |
|---|---|
|
0
|
|
|
0-5
|
|
|
1
|
|
|
1-5
|
|
|
2
|
|
|
2-5
|
|
|
3
|
|
|
3-5
|
|
|
4
|
|
|
5
|
|
|
6
|
|
|
7
|
|
|
8
|
|
|
9
|
|
|
10
|
|
|
11
|
|
|
12
|
|
|
14
|
|
|
16
|
|
|
18
|
|
|
20
|
|
|
24
|
|
|
28
|
|
|
32
|
|
|
36
|
|
|
40
|
|
|
44
|
|
|
48
|
|
|
52
|
|
|
56
|
|
|
60
|
|
|
64
|
|
|
72
|
|
|
80
|
|
|
96
|
|
Px
Static values for borders, outlines, shadows, etc.
| Unit / Value | Example |
|---|---|
|
px-1
|
|
|
px-2
|
|
|
px-3
|
|
|
px-4
|
|
Fluid
Dynamicaly clamped min/max values calculated from the base unit and the viewport.
| Unit / Value | Example |
|---|---|
|
fluid-1
|
|
|
fluid-2
|
|
|
fluid-3
|
|
|
fluid-4
|
|
|
fluid-5
|
|
|
fluid-6
|
|
|
fluid-7
|
|
|
fluid-8
|
|
|
fluid-9
|
|
|
fluid-10
|
|
Container
Static sizes (great for container queries).
| Unit / Value | Example |
|---|---|
|
xxs
|
|
|
xs
|
|
|
sm
|
|
|
md
|
|
|
lg
|
|
|
xl
|
|
|
xxl
|
|