CSS Grid Generator
Holy Grail
Dashboard
Card Grid
Magazine
Sidebar+Content
Footer Layout
Columns
Rows
Gap
Col track
1fr
2fr
3fr
auto
100px
200px
minmax
repeat
Row track
1fr
2fr
auto
80px
minmax
Area name
Auto‑placement
Name selected
Clear areas
header
sidebar
main
footer
Click a cell to select, then name it. Drag over cells to create area (click + drag).
📐 Generated CSS
CSS Grid
Tailwind (approximate)
styled-components
📋 Copy
/* grid layout */