CSS Grid Generator

Build CSS grid layouts visually. Adjust columns, rows and gaps, then copy the code.

Layout Presets

Columns: 3

Rows: 2

Gap: 16px

Drag the edges or corners of any cell to resize it. Click a cell to select it.

11×1

21×1

31×1

41×1

51×1

61×1

Show Tailwind6 cellsgrid-cols-3gap-4

CSS

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

.cell-1 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}
.cell-2 {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}
.cell-3 {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}
.cell-4 {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}
.cell-5 {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}
.cell-6 {
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
}

Tailwind CSS

<div class="grid grid-cols-3 grid-rows-2 gap-4">
  <div>1</div>
  <div class="col-start-2">2</div>
  <div class="col-start-3">3</div>
  <div class="row-start-2">4</div>
  <div class="col-start-2 row-start-2">5</div>
  <div class="col-start-3 row-start-2">6</div>
</div>