CSS Grid Generator – Visual Grid Layout Builder

This CSS Grid Generator allows developers and designers to visually create responsive grid layouts. Drag, resize, and merge grid items and instantly generate clean HTML and CSS Grid code for production use.

<div class="grid-container">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
  <div class="item-4">Item 4</div>
  <div class="item-5">Item 5</div>
  <div class="item-6">Item 6</div>
  <div class="item-7">Item 7</div>
  <div class="item-8">Item 8</div>
  <div class="item-9">Item 9</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 8px;
}

.item-1 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  min-height: 60px;
}

.item-2 {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
  min-height: 60px;
}

.item-3 {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
  min-height: 60px;
}

.item-4 {
  grid-column: 4 / span 1;
  grid-row: 1 / span 1;
  min-height: 60px;
}

.item-5 {
  grid-column: 5 / span 1;
  grid-row: 1 / span 1;
  min-height: 60px;
}

.item-6 {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
  min-height: 60px;
}

.item-7 {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
  min-height: 60px;
}

.item-8 {
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
  min-height: 60px;
}

.item-9 {
  grid-column: 4 / span 1;
  grid-row: 2 / span 1;
  min-height: 60px;
}