What the CSS Grid Generator does
This CSS grid generator lets you define column and row tracks with fr, minmax() and repeat(), set gaps, and draw named template areas by clicking cells, then shows the real grid your browser builds from those values and gives you the container CSS, one rule per area, and a matching HTML skeleton.
It checks the things that make grid layouts silently fail: a named area that is not a rectangle (which makes the browser ignore the whole grid-template-areas value), rows with different numbers of cells, an fr value used as a minimum, and auto-fit combined with sizes it cannot work with. It all runs in your browser.
How to use it
- Start from an example - a page layout with header, sidebar, main and footer, a responsive card grid, or a dashboard - or type your own track lists.
- Enter the columns (for example
220px 1fr 1fr) and, if you need fixed row sizes, the rows. Leave rows empty to let each row fit its content. - Set the column and row gaps as lengths such as
16pxor1rem. - To name areas, type a name in the brush box and click cells in the painter, or type rows of names directly. Click a painted cell again to clear it. Add rows or columns with the buttons.
- Check the live grid and any warnings, then copy the CSS, copy the HTML, or download a complete demo page.
Reading the results
The live grid is drawn by your browser from exactly the CSS shown, so what you see is what the code does - including how fr tracks share leftover space and how minmax() stops a column shrinking below its minimum.
Each named area gets a class rule such as .layout__main { grid-area: main; }. The HTML skeleton uses those classes, so the source order of the elements no longer controls where they appear.
Warnings point out mismatches that are legal but probably unintended, such as areas that assume three columns when the track list defines two; the browser then creates implicit tracks.
Worked example: the page layout, column by column
With grid-template-columns: 220px 1fr 1fr and a 16px gap in a 1,000px-wide container, the fixed column takes 220px and the two gaps take 32px, leaving 1,000 - 220 - 32 = 748px. The two 1fr tracks share it equally: 374px each.
The areas header header header / sidebar main main / footer footer footer place the header across all three columns, the sidebar in column 1 of row 2, and main across columns 2 and 3, so main is 374 + 16 + 374 = 764px wide.
Each area forms a rectangle, so the value is valid. Changing the middle row to sidebar main sidebar would split the sidebar in two, and the browser would discard the entire areas declaration - which is why the generator refuses it with an error instead.
auto-fit or auto-fill?
Both create as many columns as fit, given a minimum size such as minmax(160px, 1fr). The difference appears when there are fewer items than columns: auto-fill keeps the empty tracks, so items stay narrow; auto-fit collapses empty tracks to zero, so the items stretch to fill the row.
Neither can be combined with a bare 1fr or auto as the only size, because the browser needs a definite size to work out how many tracks fit. Wrap it in minmax() with a fixed minimum.
Limitations: what the result does not prove
- The generator validates common track syntax (lengths, percentages, fr, auto, min-content, max-content, minmax, fit-content and repeat). Newer features such as subgrid and masonry are not written or checked.
- Named areas pair poorly with auto-fill and auto-fit, since the column count changes with the width; the tool warns but does not stop you.
- Placing items in a different visual order from the source order can confuse keyboard and screen-reader users, who follow the source. Keep the reading order sensible.
- The live preview uses placeholder boxes; real content with long words or images may need
minmax(0, 1fr)to stop tracks growing.
Privacy: where your data goes
Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- CSS Grid Layout Module Level 2 - checked 19 Sep 2026
- W3C - grid-template-areas
- MDN - Basic concepts of grid layout
Frequently asked questions
What does fr mean in CSS grid?
fr is a fraction of the free space left in the grid container after fixed tracks and gaps are taken out. Two 1fr columns split it equally; 1fr 2fr gives the second column twice as much. It is only allowed as a track size, not as the minimum of minmax().
Why is my grid-template-areas value being ignored?
Usually because one named area is not a single rectangle, or because the rows have different numbers of cells. Either makes the whole declaration invalid, and browsers drop it silently. The generator checks both and names the row or area at fault.
How do I make a responsive grid without media queries?
Use repeat(auto-fit, minmax(200px, 1fr)) for the columns. The browser fits as many 200px-minimum columns as the container allows and stretches them to fill the row, so the layout goes from one column on phones to several on desktops.
What is the difference between gap and margin in a grid?
gap adds space only between tracks, never around the outside edge, and it does not collapse or double up. Margins on grid items add space around each item individually, including at the edges, which usually makes alignment harder.
Why does a 1fr column overflow with long content?
A 1fr track has an automatic minimum of its content's minimum size, so a long URL or a wide image can stretch it. Writing minmax(0, 1fr) removes that minimum and lets the column shrink, with the content wrapping or scrolling instead.
Should I use CSS grid or flexbox?
Grid lays out in two dimensions at once and suits page structures and card grids where rows and columns must line up. Flexbox lays out along one line and suits toolbars, navigation and content of unknown size. Many layouts use grid for the frame and flexbox inside it.
Last reviewed by the A2Z.Tools team against the sources listed above.
