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