CSS Grid Generator

Design CSS grids visually and copy the CSS.

Columns · 3Rows · 2Gap · 12px

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

Free CSS Grid generator. Set the number of columns and rows and the gap, preview the grid live, and copy the grid-template CSS. Runs entirely in your browser.

How to use the CSS Grid Generator

01Set how many columns and rows you want.
02Adjust the gap between cells.
03Copy the generated CSS Grid code.

Frequently asked questions

What does repeat(3, 1fr) mean?

It creates three equal-width columns, each taking one fraction (1fr) of the available space. The generator uses this fractional syntax so your grid stays responsive.