CSSAWWWARDS
+ Submit tool
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.

Share:

Presets

Grid Settings

3

Column size

2

Row size

16px
16px

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

01

Pick a preset

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

02

Set columns & rows

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

03

Adjust gaps

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

04

Copy CSS

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