CSS Grid Generator

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.

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.

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.

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.

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.

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: 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.

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.

Yes. Everything runs in your browser, so no settings or generated CSS leaves the page.