CSS Grid Generator

Visually build CSS Grid layouts. Set columns, rows, gaps, click cells to place items, and copy the CSS.

Grid Settings

Columns: 3

Rows: 3

Column gap: 8px

Row gap: 8px

Column sizes

Row sizes

Preview (click cells to place items)

1,1

2,1

3,1

1,2

2,2

3,2

1,3

2,3

3,3

CSS Code

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 8px 8px;
}

Was this page helpful?

Related tools