devkit

CSS Grid Builder

Visually design CSS grid layouts with live preview and generated code.

Grid Tracks

Columns

Rows

Gap

Grid Items

Col start

Col end

Row start

Row end

Col start

Col end

Row start

Row end

Col start

Col end

Row start

Row end

Col start

Col end

Row start

Row end

Col start

Col end

Row start

Row end

Col start

Col end

Row start

Row end

Preview

item-1

item-2

item-3

item-4

item-5

item-6

Generated CSS

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

.item-2 {
  grid-column: 2 / 3;
}

.item-3 {
  grid-column: 3 / 4;
}

.item-4 {
  grid-row: 2 / 3;
}

.item-5 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.item-6 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}