CSS Grid Generator — Developer & Web Tools — Zapit
ZapitZapit

CSS Grid Generator

Build CSS Grid layouts visually and export clean code.

Columns

Count3

Rows

Count3
Column Gap12px
Row Gap12px

Preview (showing 9 cells)

1
2
3
4
5
6
7
8
9

CSS Output

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  column-gap: 12px;
  row-gap: 12px;
}
Build CSS Grid layouts visually. Configure columns, rows, gap and track sizes, see a live colored preview, and copy the ready-to-use CSS grid-template-columns and grid-template-rows code.

Key Features

Column & Row Control
Set column and row counts with sliders (up to 12 columns and 8 rows).
Track Size Units
Choose fr, px or % for column widths and auto/px/fr for row heights.
Auto-fill / Auto-fit
Switch to responsive auto-fill or auto-fit mode with a minimum track size.
Gap Controls
Independent column-gap and row-gap sliders.
Live Preview
Colored numbered cells update instantly as you change settings.

How to Use

  1. 1Set the number of columns and rows with the sliders.
  2. 2Choose Fixed columns, auto-fill, or auto-fit layout mode.
  3. 3Set track sizes and gap values.
  4. 4Copy the CSS output for your grid container.

Frequently Asked Questions