Instant CSS
HomeToolsGrid

CSS Grid Generator

Columns4
Rows4
Gap16px
Col Start1
Col Span2
Row Start1
Row Span1

Tip: You can also drag items to move them, or drag the bottom-right corner to resize.

VISUAL EDITOR
Item 1
Item 2
Item 3
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 16px;

.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
}

.item-2 {
  grid-column: 1 / span 1;
  grid-row: 2 / span 2;
}

.item-3 {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}