Skip to main content
Pricing

Grid

Column grid system, breakpoints, and responsive layout structure.

12-Column Grid

The grid uses 12 equal-width columns at a max width of 1280px, with 16px gutters between columns and 24px outer margins.

24px
1
2
3
4
5
6
7
8
9
10
11
12
24px
12 columns·16px gutters·24px margins·1280px max

Container Widths

TokenWidthVisual
xs320px
sm480px
md640px
lg768px
xl1024px
2xl1120px
3xl1280px
4xl1440px
5xl1600px
6xl1760px
7xl1280px

Responsive Breakpoints

Breakpoints determine how content reflows across screen sizes. Column counts decrease at smaller viewports to maintain readable content widths.

NameMin WidthColumnsDescription
sm640px4Mobile landscape, small tablets
md768px8Tablets in portrait
lg1024px12Tablets in landscape, small desktops
xl1280px12Standard desktop
2xl1536px12Large desktop screens