Grid Builder
Create and customize grid layouts visually. Set columns, gutters, page margin, container width and the breakpoints they switch at, then export the same numbers as CSS Grid, Flexbox, a Tailwind v4 theme or W3C layout tokens. The URL carries the whole configuration.
Basic Grid
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Hero Layout
Hero
Sidebar
Feature 1
Feature 2
Feature 3
Feature 4
Dashboard
Header
Sidebar
Main Chart
Stat 1
Stat 2
Stat 3
Table
Activity
Photo Gallery
Photo 1
Photo 2
Photo 3
Photo 4
Photo 5
Photo 6
Photo 7
Photo 8
Grid Layout
16px
16px
min-width · mobile-first
Mobile columns apply from 0, tablet columns from md, desktop columns from lg. All three export as tokens.
Grid Preview
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9