CSS Grid Builder

Design CSS Grid layouts visually — drag to draw areas, move and resize them with your mouse, tune track sizes and gaps, then export clean CSS, HTML or Tailwind.

Canvas

Drag across cells to draw an area; drag to move, pull corners to resize. With an area selected, arrow keys move it and Shift + arrows resize.

header1×3

sidebar1×1

main1×1

aside1×1

footer1×3

Layout

Preset

Columns

Rows

Gap12px

Column sizes

Row sizes

Any CSS track size works: 1fr, auto, 240px, minmax(200px, 1fr)…

Export

Production-ready code, updated live as you edit the canvas.

.grid-container {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  gap: 12px;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.aside {
  grid-area: aside;
}

.footer {
  grid-area: footer;
}