Limits: Max 6 columns, max 6 rows

CSS Grid Generator

Design CSS grid layouts visually. Set columns, rows, gaps, and copy the code.

Live Preview

1,1

1,2

1,3

2,1

2,2

2,3

CSS Code

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 12px;
  row-gap: 12px;
}

Columns

Rows

Column Gap12px

Row Gap12px

About CSS Grid Generator

CSS Grid Generator lets you design grid layouts visually — set the number of columns and rows, configure column and row sizes (px, fr, auto, %), set gap values, and see the live preview update in real time. Copy the complete CSS grid container properties when you're done.

CSS Grid is the most powerful layout system in CSS, but writing grid-template-columns and grid-template-rows by hand requires precise syntax. This tool generates that syntax for you from a visual interface.

Includes support for fractional (fr) units, minmax(), auto-fill, and auto-fit for responsive grids.

Features

✓Visual column and row configuration
✓Support for px, fr, auto, and % units
✓Gap control for column-gap and row-gap
✓Live preview with colored grid items
✓Copy complete grid container CSS

Common Use Cases

→Designing page layouts with CSS Grid
→Building responsive image gallery grids
→Creating dashboard layouts with named grid areas
→Learning CSS Grid column and row sizing