Professional CSS Grid builder with editable tracks, gaps, alignment, item placement/spans, presets, and live CSS/HTML output.
Workspace
Tracks, gaps, placement, and spans — with live CSS output.
Presets
Template
Column tracks
Row tracks
Alignment & gap
Items · 6
Preview
1fr 1fr 1fr × 1fr 1fr
Template + item placement
CSS outputcss | grid.css
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-auto-flow: row;
justify-items: stretch;
align-items: stretch;
justify-content: stretch;
align-content: stretch;
gap: 12px;
padding: 16px;
}
.grid-container > .item-1 {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
.grid-container > .item-2 {
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}
.grid-container > .item-3 {
grid-column: 3 / span 1;
grid-row: 1 / span 1;
}
.grid-container > .item-4 {
grid-column: 1 / span 1;
grid-row: 2 / span 1;
}
.grid-container > .item-5 {
grid-column: 2 / span 1;
grid-row: 2 / span 1;
}
.grid-container > .item-6 {
grid-column: 3 / span 1;
grid-row: 2 / span 1;
}Markup
HTML structurehtml | grid.html
<div class="grid-container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
</div>Keep exploring
Professional CSS Flexbox playground with drag-and-drop reorder, container controls, per-item grow/shrink/basis/order, presets, and live CSS/HTML output.
Open toolDesign CSS borders with per-side width/style/color, linked or individual radii, presets, live preview, and IDE-ready CSS output.
Open toolClick a question to open it. Click again to close.
Looking for more? Browse Our Tools.