Loading page
About this tool
Generate CSS Grid layouts visually. Adjust column/row counts, gaps, and copy complete CSS grid-template code instantly.
The CSS Grid Generator builds a grid-template-columns / grid-template-rows rule by letting you set the column and row count, then click each individual track to cycle its size through 1fr, 2fr, auto and a fixed pixel value. Row and column gaps are set separately, so the output uses the two-value gap shorthand (row then column). Copy the CSS on its own, or download a file that pairs it with a ready-made HTML scaffold of numbered grid items.
Open CSS Grid Generator on AltFTool — it loads instantly in your browser.
In Grid Structure Controls, set the Columns and Rows sliders — each runs from 1 to 8 tracks.
Use the Column Gap and Row Gap sliders (0 to 40px) to define the space between grid cells, then click a Col or Row chip under Column Track Sizing or Row Track Sizing to cycle its unit through 1fr, 2fr, auto and a fixed pixel width.
Once the Grid Container Visualizer looks right, press Copy to take the generated grid-template-columns and grid-template-rows rules, or Download for grid-layout-template.txt with the matching HTML.
Every column and row is individually clickable and cycles through 1fr, 2fr, auto and a fixed px size, so you can build asymmetric grids instead of only even ones.
The two gaps have their own sliders and are emitted in the correct row-then-column order of the gap shorthand, a common place to get the values backwards.
The download pairs the grid rule with a matching container and one numbered .grid-item div per cell, so the layout renders the moment you paste it.
Between 1 and 8 of each, giving a maximum of 64 cells. Any track beyond what you have sized defaults to 1fr, so a fresh grid starts out perfectly even.
In gap: 12px 20px the first value is the row gap (vertical space between rows) and the second is the column gap. Both sliders here run from 0 to 40px and are written in that order, so the shorthand matches what you see in the preview.
1fr claims an equal share of the leftover free space, while auto sizes the track to its content and only grows if space remains after the fr tracks are satisfied. Use a fixed value like 120px when the track must not change size at all.
Yes — the rule targets a .grid-container class, so applying that class to any element with children turns them into grid items. The bundled HTML is only a scaffold: it creates one numbered .grid-item div per cell so you can see the grid immediately.