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-4

3

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