Tool · Layout
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.
Templates
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