Free CSS Grid Generator – Build Grid Layouts Visually

How CSS Grid Tracks Work and How to Build a Layout

CSS Grid is the layout system for two dimensions at once. You define columns and rows on a container, and its children fall into the cells, which means a page structure that used to need nested wrappers and floats becomes two declarations. This generator lets you set the column count, the row count, the track sizes and the gap, with a live preview that reflows as you change each value, and it shows the exact CSS it produces. Front-end developers laying out a dashboard, anyone building a card gallery, and people who find the track-sizing syntax intimidating all get the same benefit: working code plus a readable example of the syntax. The core idea is the track. grid-template-columns lists the width of each column, and grid-template-rows does the same vertically, with each value in the list defining one track. The fr unit is what makes grid flexible: it means one fraction of the leftover space after fixed sizes and gaps are subtracted, so 1fr 1fr 1fr gives three equal columns that resize with the container. The repeat function shortens that to repeat(3, 1fr). gap sets the space between tracks, and unlike the old margin approach it never adds space at the outer edges. Two functions do the heavy lifting for responsive work: minmax sets a floor and ceiling for a track, and auto-fit combined with minmax lets the browser decide how many columns fit, which produces a responsive gallery with no media queries at all. Do the arithmetic on a real container. Suppose your grid is 960 pixels wide with grid-template-columns set to repeat(3, 1fr) and a gap of 24 pixels. Two gaps sit between the three columns, consuming 48 pixels, leaving 912 pixels of free space that the three fr tracks split equally at 304 pixels each. Change the declaration to repeat(auto-fit, minmax(240px, 1fr)) and the browser instead works out how many 240-pixel-minimum columns will fit: at 960 pixels wide it lands on three columns of 304 pixels, at 560 pixels it drops to two, and below 504 pixels it falls to a single full-width column. Same one line of CSS, fully responsive, with no breakpoints written by hand anywhere. Where this gets used. A developer builds an admin dashboard with a fixed 240-pixel sidebar and a flexible main area using grid-template-columns 240px 1fr. A photographer lays out an image gallery with auto-fit and minmax so it reflows from three columns to one without a single media query. Someone building a pricing page arranges three cards of equal height, since grid rows stretch to match by default. A team creating a form places labels and inputs in two aligned columns, which grid handles cleanly because alignment happens across rows as well as within them. A developer builds a magazine layout where one feature card spans two columns and three rows. Two points worth internalising. Grid and flexbox are not competitors: flexbox handles a single row or column of content, grid handles both directions at once, and most real pages use grid for the page skeleton and flexbox inside individual components. Reaching for grid to lay out a navbar is overkill; reaching for flexbox to lay out a dashboard means nested containers and fighting alignment. The pitfall beginners hit is putting a percentage width on grid children, which fights the track sizing and causes overflow once the gap is added; let the tracks control width and leave the children at their natural size. Grid needs no prefixes in any current browser, so the generated declarations can ship exactly as they appear. Everything runs in your browser and nothing is uploaded anywhere.

🔥 Trending Tools