CSS grid generator

Pick columns, rows, and gaps — get copyable grid-template CSS and a preview.

ColumnsRowsColumn sizingRow height

Row gap (px)Column gap (px)Justify itemsAlign itemsJustify content

Preview

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 8px;
}

Up to 24 columns and rows, gaps up to 200px. The preview shows generic cells; spans, named areas, and responsive queries are not generated.

Everything runs in this browser.

Up to 12×12 tracks with px or fr units. Generates grid-template plus optional placement classes — not a full layout builder.