CSS Grid Generator
Design CSS Grid layouts visually — set columns, rows, gap, and alignment, or generate a responsive auto-fit grid, then copy the CSS.
CSS Grid Generator creates grid-template-columns, grid-template-rows, gap, and item-alignment CSS visually, with a live preview grid, a responsive auto-fit mode (repeat(auto-fit, minmax())) for cards that reflow without media queries, an optional custom track-size override (e.g. 1fr 2fr 1fr), six ready-made presets, and one-click copy of the generated CSS. Runs entirely in your browser — no upload, no signup, no account. Made by FreeToolHub.
Grid Mode
Overrides the columns slider. Use CSS track sizes separated by spaces.
Gap
Alignment
Preview
CSS Output
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
justify-items: stretch;
align-items: stretch;Quick Presets
Build CSS Grid layouts for cards, galleries, and dashboards — fixed equal columns, custom track sizes, or a fully responsive auto-fit grid with no media queries.
Frequently Asked Questions
What is CSS Grid?
CSS Grid is a two-dimensional layout system that arranges elements into rows and columns using grid-template-columns, grid-template-rows, and gap, without floats or flexbox workarounds.
What does Auto-Fit (Responsive) mode do?
It generates grid-template-columns: repeat(auto-fit, minmax(<min width>, 1fr)), which automatically fits as many columns as the container width allows and reflows to fewer columns on smaller screens — no media queries needed.
Can I use unequal column widths?
Yes. Enter custom track sizes like 1fr 2fr 1fr in the custom column tracks field to override the equal-column slider with any mix of fr, px, %, or auto values.
What's the difference between justify-items and align-items?
justify-items controls how each grid item is positioned horizontally within its cell; align-items controls vertical positioning within its cell. Both accept start, center, end, or stretch.
Can I copy the generated CSS?
Yes. Click Copy CSS to copy the exact grid declaration — including grid-template-columns, gap, and alignment — to your clipboard, ready to paste into your stylesheet.
Does this tool store my settings or cost anything?
No. Everything runs locally in your browser; nothing is saved, uploaded, or sent to a server. The CSS Grid Generator is completely free with no sign-up, no account, and no limits.