CSS Grid is a powerful layout system, but remembering the exact syntax for template columns, rows, and gaps while setting up a new layout can slow you down. This tool lets you set the structure visually and generates the matching CSS instantly.
Adjust the number of columns and rows and the gap between items, and watch a live preview of numbered grid cells update to match, then copy the exact grid-template-columns, grid-template-rows, and gap CSS.
This is useful for quickly prototyping a grid layout's basic structure before writing the full CSS for your actual content, or as a reference for the correct grid syntax.
Because everything runs locally in your browser, results appear instantly and nothing you type or upload is ever sent to a server.
Bookmark this page if you expect to use this tool regularly — it loads fast and behaves the same way every time, with no account needed.
This kind of task shows up constantly in everyday writing, coding, design, and admin work, which is exactly why a dedicated, focused tool saves so much back-and-forth.
A tool that does one job well, without a cluttered interface or unrelated features competing for attention, tends to be faster to use than a heavier all-in-one app.
If you find yourself needing this conversion or calculation often, keeping this page open in a tab is usually faster than digging through a bigger software suite's menus.
Because there's no sign-up or installation step, you can jump straight from search result to working tool in a couple of seconds.
Frequently asked questions
Does this generate equal-width columns only?
Yes, this version creates equal-fraction (1fr) columns and rows for a simple, evenly-spaced grid; custom column widths would need manual adjustment to the generated CSS.
Can I use this grid CSS directly in my project?
Yes, the generated CSS is standard, ready-to-use grid syntax — just apply it to your container element and place your actual content inside as grid items.