Build CSS Grid Templates Visually and Export Clean Code
Define grid-template-columns and grid-template-rows using fr, px, %, minmax() and repeat(). Click cells to group them into named grid areas, watch the exact resolved pixel width of every track against your container, then copy production-ready CSS.
repeat(3, 1fr), 200px 1fr, minmax(100px,2fr)Generated CSS
How the fractional-space algorithm works
CSS Grid resolves a track list in a fixed order, and this generator reproduces that math exactly. First it measures the gap space: for n tracks there are n − 1 gaps, so freeSpace = containerWidth − (n − 1) × gap. Next it subtracts every definite track from that free space: a px value is taken literally, a % value resolves against the container width, and a minmax(min, max) reserves its minimum during this pass. Whatever remains is the leftover that flexible fr tracks compete for.
The distribution then follows the fractional rule: fr_width = leftover × (thisFr ÷ sumOfAllFr). A track written as 2fr therefore receives twice the slice of a 1fr track, but only after fixed and percentage tracks have taken their share. For a minmax(min, max) track the resolved size is clamped so it never drops below min nor exceeds max, exactly like the real layout engine. The repeat(count, tracklist) syntax is expanded inline before any of this runs, so repeat(3, 1fr) becomes three independent 1fr tracks.
The bars beneath the preview show each track's final computed pixel size so you can verify a design before shipping it. When you select cells and name an area, the tool emits a matching grid-template-areas string plus per-item grid-column / grid-row shorthands using line numbers, giving you copy-ready code for both modern area-based and classic line-based layouts. Everything runs locally in your browser — no data leaves the page.