CSS Grid Generator

Visually configure a CSS Grid layout. Set columns, rows, track sizes, and gaps, then copy ready-to-use CSS.

Columns

Col 1

Col 2

Rows

Row 1

Row 2

Col Gap

16px

Row Gap

16px

.grid-container {
  display: grid;
  grid-template-columns: 3fr 3fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}