CSS Grid Generator
Visual CSS Grid builder with grid-template-areas, auto-fit + minmax responsive tracks, per-item spans. 6 presets. Free, offline, client-side, instant.
Visual CSS Grid with grid-template-areas (named grammar), auto-fit + minmax (the responsive grid pattern), and per-item grid-column/grid-row spans. 6 real-world presets (12-col, responsive cards, holy grail, dashboard, sidebar, photo gallery).
Columns
Rows
grid-template-areas (optional)
Gap and flow
Click any item to customize its span or area.
Per-item
CSS
HTML
How to Use CSS Grid Generator
- Start with a preset (12-col Bootstrap-like, responsive auto-fit cards, holy grail with areas, dashboard) or blank.
- Pick a column mode: equal fr (uniform),
auto-fit + minmax(responsive, items wrap automatically),auto-fill(reserves empty tracks), or custom string. - Pick a row mode: equal fr, auto (content-sized), or custom.
- Optionally fill in grid-template-areas: name regions ("header", "sidebar", and so on) and the tool maps items to areas.
- Set gap, auto-flow (use
densefor masonry-like packing), and item alignment. - Click any cell in the preview to customize its
grid-columnorgrid-rowspans or itsgrid-areaname. - Copy CSS (container plus per-item rules), copy HTML, or download
grid.css.
Frequently Asked Questions
What is auto-fit + minmax and why does it matter?
The responsive grid pattern: repeat(auto-fit, minmax(250px, 1fr)). Each column is at minimum 250px and at maximum a fraction. The browser fits AS MANY columns as it can, growing items to fill leftover space. No media queries needed, because the grid is intrinsically responsive. This is the single most-used CSS Grid pattern in production.
What is the difference between auto-fit and auto-fill?
Both reserve track slots based on the minmax. auto-fit COLLAPSES empty tracks, so remaining items stretch to fill the row. auto-fill KEEPS empty tracks, so items stay at their min size and the row has empty cells. Auto-fit feels more polished; auto-fill is useful when you want predictable item widths.
What is grid-template-areas?
You give each grid region a name, then assign items to areas by name instead of by row/column number. Naming three rows header, sidebar/main/aside, and footer is the holy grail layout: visually obvious, and rearranging the layout for mobile is just rewriting the area string.
How do I make a masonry-like layout?
True CSS masonry (grid-template-rows: masonry) is only in Firefox behind a flag as of 2026. The closest portable workaround is grid-auto-flow: dense. With dense flow, the browser BACKFILLS earlier empty cells when later items would fit, producing an irregular packed look without true masonry.
What is subgrid? Can I use it?
subgrid lets a nested grid INHERIT its parent’s tracks, perfect for card layouts where you want titles, bodies, and CTAs in nested cards to all align across cards. Browser support: Firefox since 2019, Chrome and Edge since 117 (2023), Safari since 16. It is safe to use in 2026, but this tool does not generate it because subgrid is a property of CHILD grids, not the container.
Why does my grid only show one row of items?
Likely because you set grid-template-rows: repeat(1, 1fr) (only 1 row) but have many items. Either increase row count, use auto for rows so implicit rows are created, or use grid-auto-rows: 100px to size implicit rows.
Grid vs Flexbox, when?
Grid: 2D layouts where both rows AND columns matter (page structure, image grids, dashboards, forms with label/input columns). Flexbox: 1D, items along one axis (nav bars, button groups, card rows). They compose: grid cells can contain flex containers and vice versa.
How do I align items in grid?
Three pairs. justify-items / align-items handle per-cell alignment of all items. justify-content / align-content handle how the whole grid sits in the container when the grid is smaller than the container. justify-self / align-self on individual items override for one item.
Is my data secure?
Yes. Everything runs in your browser, so no settings or generated CSS leaves the page.