What are named areas?

Optional grid-template-areas. Use them for a holy-grail layout; leave them off for a simple card grid.

Reset restores the default 3×2 grid.

CSS Grid Generator

Dial in columns, rows, and gaps, then copy clean CSS with a live preview.

Presets

Columns

Rows

Column gap

Row gap

Justify itemsAlign itemsJustify contentAlign content

Named areas

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(80px, auto));
  gap: 16px 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}

Worked example

A 3×2 card grid with 16px gaps copies as display: grid and repeat(3, minmax(0, 1fr)). The preview uses the same rules.

FAQ

What are named areas?: Optional grid-template-areas. Use them for a holy-grail layout; leave them off for a simple card grid.
Will the CSS work today?: Yes. It is standard CSS Grid.
How do I reset?: Reset restores the default 3×2 grid.