Built-in toolFree · No signup

CSS Grid Generator

Build CSS grid layouts visually. Configure column count and size, row count and height, column gap, and row gap. Choose from 4 layout presets (Holy Grail, Blog, Magazine, Cards) or build from scratch. The live preview shows numbered cells and updates instantly.

Presets

Grid Settings

Columns3

Column size

Rows2

Row size

Column gap16px

Row gap16px

Live Preview

1

2

3

4

5

6

3 columns × 2 rows = 6 cells

CSS Output

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

How to use

Pick a preset

Start from Holy Grail, Blog, Magazine, or Cards to get a common layout structure instantly.

Set columns & rows

Use the column count slider (1–8) and size dropdown to define your grid columns. Do the same for rows.

Adjust gaps

Set column-gap and row-gap independently using the sliders to control spacing between cells.

Copy CSS

Hit Copy CSS to get the grid-template-columns, grid-template-rows, and gap declarations.

More CSS layout tools

From our directory of 30+ CSS tools.

Browse all →

layouts

CSS Grid Generator

Visually build CSS grid layouts and export production-ready code.

#grid#layout#responsive

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →