CSS Grid Generator

Set columns, rows and gaps to build a CSS grid template, with a live preview and copyable code.

Columns3

Rows2

Column gap12px

Row gap12px

CSS

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
column-gap: 12px;
row-gap: 12px;

Builds an equal-track grid with repeat(n, 1fr) and the gaps you choose. Runs locally.