CSS Grid Generator — Visual Grid Layout Designer with Areas, Gap, Copy CSS

A visual CSS Grid layout designer for the kind of layouts you actually ship — 12-column hero rows, three-card product galleries, main + sidebar app shells, and the classic holy-grail (header / nav / main / aside / footer) page skeleton. Set the number of rows and columns, pick a gap value, then choose how columns should size: equal (1fr 1fr 1fr ...), fit-content (auto), or per-track custom values where every column gets its own size string (200px, minmax(0, 1fr), 12rem, 25%, anything CSS Grid accepts). Click a cell to give it a name — header, sidebar, content — and drag across cells to merge them into a single named area (grid-template-areas style). The preview panel renders the grid live using the exact same values that will end up in your copied CSS, so what you see is what you ship. Hit copy and paste display: grid; grid-template-columns: ...; grid-template-rows: ...; gap: ...; grid-template-areas: ...; into your stylesheet, your Tailwind arbitrary-value class, or a React inline style. Four presets get you started in one click; everything is editable from there. 100% client-side, no upload, no account, no tracking — designed for developers wiring layouts in React/Vue/Svelte, designers prototyping responsive grids before handing off, and indie builders who want the right grid in 60 seconds instead of 20 minutes of MDN deep dives.