CSS Grid Generator

Design a CSS grid visually — set columns, rows, gaps, and merged cells, then copy the grid-template CSS. Everything runs in your browser.

The CSS Grid Generator runs entirely in your browser. The columns, rows, track sizes, gaps, and merged cells you configure never leave your device and nothing is uploaded to ArrayKit.

Open the CSS Formatter

About CSS Grid Generator

The CSS Grid Generator lets you build a grid layout by eye and copy the exact CSS it produces. Pick a column and row count, size each track with fr units, pixels, percentages, auto, or minmax(), and set the gap. A live preview shows the grid; click two cells to merge them into a spanned region and the tool writes the matching grid-column and grid-row rules for you. Runs of three or more identical tracks collapse into repeat() so the output stays tidy, and you can rename the selector to match your own class. It is made for front-end developers laying out cards, dashboards, and page shells who want correct grid-template CSS without hand-counting lines. The editor runs entirely in your browser, so nothing you type is uploaded.

Features

How to use the CSS Grid Generator

  1. Choose how many columns and rows your layout needs
  2. Size each track with fr, px, %, auto, or minmax()
  3. Set the gap, and a column gap if it should differ
  4. Click two cells in the preview to merge a spanned region
  5. Copy the generated CSS into your stylesheet

Example

Input

columns: 200px 1fr 1fr 1fr
rows: auto
gap: 20
merge: cols 2-4

Output

.grid {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

.grid > :nth-child(1) {
  grid-column: 2 / span 3;
  grid-row: 1;
}

Three equal columns collapse into repeat(3, 1fr) and the merged cells span three tracks.

Common errors & troubleshooting

Frequently asked questions

What does the CSS Grid Generator output?
It produces a container rule with display: grid, grid-template-columns, grid-template-rows, and gap, plus one grid-column / grid-row rule for each merged region you create. You copy the whole block into your stylesheet.
When do my tracks collapse into repeat()?
Three or more identical adjacent tracks fold into repeat(n, value). One or two in a row stay written out, since repeat() only shortens the output from three tracks up. Mixed sequences interleave literal tracks and repeat() groups.
How do I merge cells to span multiple columns or rows?
Click one cell in the preview, then click a second cell. The tool selects the rectangle between them and writes grid-column and grid-row with the right start line and span. Click a merged block again to split it back into single cells.
Can I use minmax(), auto, and percentages for track sizes?
Yes. Each track accepts an fr value, a pixel length, a percentage, auto, or minmax(min, max). Bare numbers are treated as fr, and minmax() spacing is normalised so the copied CSS is consistent.
Why does the generated rule use a :nth-child() selector?
Merged regions are placed by position, so the tool targets grid children in source order with :nth-child(). Rename the container selector to your own class, and the placement rules follow it automatically.
Does the grid I design get sent anywhere?
No. The CSS Grid Generator builds the template and placement CSS entirely in your browser. The columns, rows, gaps, and merged cells you set never leave your device and are not uploaded to ArrayKit.

Related tools

All ArrayKit tools