Grid
The columns and gutters a page sits on, at every width.
Columns
1
2
3
4
5
6
7
8
9
10
11
12
| Width | Columns | Gutter | Layout |
|---|---|---|---|
| < 640 | 4 | 16px | sidebar behind a menu |
| 640 to 1023 | 8 | 24px | sidebar behind a menu |
| 1024 to 1279 | 12 | 24px | sidebar and content |
| 1280 and up | 12 | 24px | sidebar, content, on-this-page |
Tokens
52 tokens
--container- 1120px
--sidebar- 248px
--toc- 200px
--topbar- 56px
--gutter- 24px
--gutter-sm- 16px
--control-xs- 24px
--control-sm- 28px
--control- 32px
--tag- 20px
--control-lg- 44px
--overlay-sm- 400px
--overlay- 480px
--overlay-lg- 640px
--popover- 288px
--toast-width- 384px
--popover-sm- 256px
--tooltip-max- 256px
--hint-width- 420px
--menu-min- 192px
--popup-max- 320px
--menu-width- 320px
--field-max-height- calc(var(--control-lg) * 4)
--row-sm- 32px
--row- 40px
--row-lg- 56px
--label-column- 160px
--measure- 68ch
--tab-max- 220px
--sidebar-icon- calc(var(--control) + var(--space-4))
--attachment-media- 40px
--attachment-max- 256px
--grab-size- 40px
--fade-edge- 24px
--fade-line-end- 16px
--measure-hint- 60ch
--measure-short- 48ch
--page-header-max- 720px
--search-min- 200px
--search-max- 320px
--crumb-floor- 8ch
--log-level- 5ch
--status-column- 128px
--timeline-name- 200px
--timeline-name-min- 120px
--timeline-label-min- 10ch
--time-column- 12ch
--stat-placeholder- 4ch
--tool-detail-min- 6ch
--line-box- 1lh
--skeleton-text- 0.7em
--code-inline- 0.9em