Grid Generator

Create complex CSS Grid layouts with live preview and code export

← Back to Home

Drag cards in the preview to snap them to grid cells.

Grid stack

Grid Items

Item 1#1
Item 2#2
Item 1
Item 2

HTML Export

<;div class="grid-container">;
  <;div class="grid-item-1">;Item 1<;/div>;
  <;div class="grid-item-2">;Item 2<;/div>;
<;/div>;

CSS Export

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 16px;
  row-gap: 16px;
  grid-auto-flow: row;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}
.grid-item-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background-color: #667eea;
}
.grid-item-2 {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  background-color: #764ba2;
}