CSS Layout Builder

Live Preview
1:1
1:2
1:3
2:1
2:2
2:3
Presets
Columns
1
2
3
Rows
1
2
Gap
8px
Grid Areas

Click and drag cells in the preview to select a region, then type an area name.

Child Items

No child items. Add one to position it on the grid.

CSS Output
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}