Grid Builder

Visual CSS Grid layout designer. Define columns and rows, place items, export clean code.

1fr
1fr
1fr
1fr
1fr
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}

Columns (3)

1
2
3

Rows (2)

1
2

Gap

Part of the design toolkit — Palette · Shadow · Animate · Ease · Gradient