CSS Grid Generator

Columns (3)

1
2
3

Rows (2)

1
2

Gap

Items (6)

Preview

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

.item-1 {
}

.item-2 {
  grid-column: 2 / 3;
}

.item-3 {
  grid-column: 3 / 4;
}

.item-4 {
  grid-row: 2 / 3;
}

.item-5 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.item-6 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
html
<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>

Building a grid layout? MightyWidgets adds interactive components like accordions, tabs, and sliders to any site.

Check out MightyWidgets.com