BLOCKS / CORE
Grid block
The grid block supports columns from 1 to 12, all Tailwind max-width options, and a full-width mode. Every grid has responsive collapse behavior built in.
Container widths
Every max-width available in the grid block. Each bar below shows the actual width relative to the viewport.
None (full width) — 100%
100%
screen-2xl — 1536px
1536px
screen-xl / 7xl — 1280px
1280px
6xl — 1152px
1152px
screen-lg / 5xl — 1024px
1024px
4xl — 896px
896px
3xl / screen-md — 768px
768px
2xl — 672px
672px
screen-sm — 640px
640px
xl — 576px
576px
lg — 512px
512px
md — 448px
448px
sm — 384px
384px
1 through 6 columns
The most used column counts. Each collapses responsively on smaller screens.
1 COLUMN
1 / 1
2 COLUMNS
1
2
3 COLUMNS
1
2
3
4 COLUMNS → 2 ON MOBILE
1
2
3
4
5 COLUMNS → 2 ON MOBILE
1
2
3
4
5
6 COLUMNS → 3 → 2
1
2
3
4
5
6
Full 12-column grid
The foundation. All column counts divide evenly into 12. Use colSpan to create any layout.
1
2
3
4
5
6
7
8
9
10
11
12
col-span-12
span-6
span-6
span-4
span-4
span-4
3
3
3
3
2
2
2
2
2
2
span-8
span-4
3
span-6
3
span-9
3
2
span-8
2
span-5
span-7
Asymmetric splits
COMING SOON
Custom fractional and fixed-width columns for split layouts.
60 / 40
~60%
~40%
SIIDE BAR + CONTENT
~280px
1fr (fluid)
ICON + CONTENT + ACTION
72px
1fr (fluid)
auto
CONTENT + NARROW SIDEBAR
1fr (fluid)
320px
Gap sizes
Standard spacing between grid items, set via gapX and gapY.
GAP-2 (8PX)
GAP-4 (16PX)
GAP-5 (20PC)
GAP-6 (24PX)
GAP-8 (32PX)
Responsive reordering
Each grid-item-block can have a different sort order on desktop (orderLg), tablet (orderMd), and mobile (order). Resize your browser to see items rearrange.
IMAGE + TEXT SWAP ON MOBILE
On desktop and tablet the image is first. Below 768px the text moves above the image so the headline is seen first.
Image
Headline first on mobile
This text block moves above the image on screens below 768px.
FULL REORDER ACROSS BREAKPOINTS
6 items with completely different sort order on desktop (3 cols), tablet (2 cols), and mobile (1 col) — set via order (mobile), orderMd (tablet), orderLg (desktop).
A
Desktop: 1st · Tablet: 1st · Mobile: 3rd
B
Desktop: 2nd · Tablet: 3rd · Mobile: 1st
C
Desktop: 3rd · Tablet: 5th · Mobile: 5th
D
Desktop: 4th · Tablet: 2nd · Mobile: 2nd
E
Desktop: 5th · Tablet: 4th · Mobile: 6th
F
Desktop: 6th · Tablet: 6th · Mobile: 4th
PRIORITY CONTENT ON MOBILE
Push the most important item (CTA) to the top on mobile, even though it's last on desktop.
Feature 1
Feature 2
Feature 3
CTA ↑ first on mobile