CSS Grid Generator

Generate CSS Grid layouts visually. Supports template areas, auto-fill, minmax, and alignment.

Columns

Count3

Column Unit

Column Size1fr

Use minmax()

Auto Mode

Rows & Gap

Row Count3

Row Height80px

Column Gap16px

Row Gap16px

Alignment

justify-items

align-items

justify-content

Live Preview

Generated CSS

css

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 80px);
  gap: 16px;
}

CSS Grid quick reference

• fr — fractional unit, distributes remaining space

• minmax(200px, 1fr) — minimum + maximum column size

• auto-fill — fills row with as many columns as possible

• auto-fit — like auto-fill but collapses empty tracks

• grid-template-areas — named layout regions

• grid-area — assigns element to a named region