CSS Grid Generator

How to use it

1. Set the column count and row count (1 to 12 each). The preview draws one cell per intersection.
2. Type column tracks like 1fr 2fr 1fr or repeat(2, 1fr) 240px. Leave the field empty and every column becomes 1fr.
3. Type row tracks the same way, such as auto 1fr auto. Leave empty and rows size themselves to content.
4. Set a gap like 12px, or row and column values like 8px 16px. Leave empty for no gap.
5. Pick justify-items, align-items and justify-content to control how cells sit inside their tracks.
6. Copy the CSS and HTML from the output card.

Common use cases

• Page shells - header, sidebar, main and footer areas in one grid definition.
• Card galleries - repeat(auto-fill, minmax(240px, 1fr)) style responsive grids.
• Dashboard panels - fixed side columns with a fluid center column.
• Form layouts - label and field columns that line up without floats or tables.
• Learning grid - see how fr units, minmax and gap behave as you change numbers.

Why it stays private

The grid CSS is plain string building in this page. Track values, counts and the preview never leave your browser, and the tool works offline.

FAQ

Q: What track syntax is accepted? A: Any value valid for grid-template-columns or grid-template-rows: fr, px, %, em, auto, min-content, max-content, minmax(), fit-content() and repeat(). The tool only screens characters, so a misspelled keyword shows up as a broken preview rather than an error message.

Q: What happens when the track fields are empty? A: Columns fall back to repeat(n, 1fr) using the column count, and no grid-template-rows line is written. The gap line is omitted too when the gap field is empty.

Q: Are the pixel sizes in the preview accurate? A: The preview is a real grid rendered with the same CSS, but the preview box is narrow. Treat px tracks as approximate until you paste the code into your own layout.

Q: Which alignment properties are output? A: justify-items, align-items and justify-content. justify-items accepts stretch, start, center and end; align-items adds baseline; justify-content adds space-between, space-around and space-evenly, and the line is omitted when it is normal.