CSS Grid Generator

Visually build a CSS Grid with equal-sized tracks. Adjust the number of columns (1–12), rows (1–12), and gap (0–32px), and the tool renders a live grid of numbered cells plus a four-line CSS snippet using grid-template-columns: repeat(N, 1fr) and grid-template-rows: repeat(M, 1fr).

1. Drag the Columns slider (1–12) to set the number of equal 1fr columns. 2. Drag the Rows slider (1–12) to set the number of equal 1fr rows. 3. Drag the Gap slider (0–32px) to set the gutter between cells. 4. Click Copy to copy the four-line CSS declaration block.

The output is always exactly four lines: display: grid; grid-template-columns: repeat({cols}, 1fr); grid-template-rows: repeat({rows}, 1fr); gap: {gap}px. All tracks are equal fractions (1fr) — there is no support for mixed sizes, minmax, auto-fit/auto-fill, or named areas in this tool.