CSS Grid generator.

Worked example: a header, sidebar and main layout

The page opens with a 3 by 3 grid and a 16px gap. Item 1 starts at column 1 and spans 3 columns in row 1 (the header). Item 2 sits in column 1 and spans rows 2 and 3 (the sidebar). Item 3 starts at column 2, spans 2 columns and rows 2 to 3 (the main area). The generated CSS is:

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

.item-1 { grid-column: 1 / span 3; grid-row: 1; }
.item-2 { grid-column: 1; grid-row: 2 / span 2; }
.item-3 { grid-column: 2 / span 2; grid-row: 2 / span 2; }

How the output is built

The container uses grid-template-columns: repeat(n, size) and the same for rows. When both gaps match it writes the gap shorthand, otherwise column-gap and row-gap. An item with a start line and span becomes grid-column: start / span n; a start alone becomes grid-column: start; a span alone becomes grid-column: span n. Items with start 0 and span 1 get no rule and are auto-placed. Grid lines are numbered from 1, so a grid with 3 columns has lines 1 to 4. Spans are limited so an item stays inside the explicit grid, and overlapping items are flagged.

Tailwind note. In Tailwind, grid-cols-N generates repeat(N, minmax(0, 1fr)), which is not the same as repeat(N, 1fr) (the minmax form stops long content from stretching a column). This tool therefore only emits the named grid-cols-N and grid-rows-N classes when the size is minmax(0, 1fr), and uses an exact arbitrary value such as grid-cols-[repeat(3,1fr)] otherwise. Item classes use col-start-N, col-span-N, row-start-N and row-span-N for small numbers and arbitrary values beyond that. Gaps always use arbitrary values such as gap-[16px] so they match the number you typed.

Sources (checked 2026-09-30): MDN: CSS grid layout, MDN: grid-template-columns (valid track sizes), Tailwind: grid-template-columns, Tailwind: grid-column.