CSS Grid Generator
Design grid layouts visually — columns, rows, gaps and spans — and copy the CSS.
Press on an empty cell and drag to another to add an item. Click an item to remove it.
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, minmax(60px, auto));
column-gap: 16px;
row-gap: 16px;
}
.div1 { grid-area: 1 / 1 / 2 / 5; }
.div2 { grid-area: 2 / 1 / 4 / 2; }
.div3 { grid-area: 2 / 2 / 4 / 5; }