CSS Grid Generator

About this tool

Set the number of columns and rows, the gaps between them, and how items sit inside their cells. The preview updates live and the generated CSS — everything applied to the grid container — is ready to copy.

What the output means. A CSS grid is declared on a container with display: grid. The generator produces four properties:

• grid-template-columns: repeat(3, 1fr) — three columns, each 1fr (one fraction of the leftover space), so they share the width equally.
• grid-template-rows: repeat(2, 1fr) — same idea vertically.
• gap: 10px 10px — row gap then column gap (a single value sets both).
• justify-items / align-items — where each item sits inside its cell when the cell is bigger than the content.

What fr is. The fr unit distributes space that's left after fixed sizes and gaps are subtracted. 1fr 1fr 1fr makes three equal columns; 2fr 1fr makes the first twice as wide as the second; 200px 1fr makes a fixed 200px sidebar and a flexible main area. This tool generates equal 1fr tracks as a starting point — edit the copied CSS for anything uneven.

justify vs. align. In grid, justify-* is the row axis (horizontal in left-to-right languages) and align-* is the column axis (vertical). justify-items: center; align-items: center centres every item in its cell. The default stretch makes items fill the cell.

Responsive grids. A fixed column count breaks on small screens. The common fix isn't a media query but repeat(auto-fill, minmax(200px, 1fr)): "as many 200px-minimum columns as fit, each growing to share the row." This generator uses a fixed count for clarity; swap in the auto-fill version for a fluid layout.

Grid vs. flexbox. Grid is for two-dimensional layout — rows and columns that line up. Flexbox is for one dimension — a row or a column of items. A card gallery or a page skeleton is grid; a nav bar or a row of buttons is flexbox. For the latter, use the flexbox generator.

Placing individual items. This generator covers the container. To make one item span two columns or start on a specific line, the items themselves take grid-column: span 2 or grid-column: 1 / 3 — add those by hand. To tidy or shrink the final CSS, use the CSS minifier.

Frequently asked questions

Why does this use repeat(N, 1fr) instead of listing each size?

repeat(N, 1fr) makes N equal tracks in one short expression — the usual starting point. For custom widths like a fixed sidebar plus a flexible main area, edit the generated CSS.

What's the difference between justify-items and align-items in a grid?

justify-items positions each item along the row axis (horizontal); align-items along the column axis (vertical). Together they place content inside a cell larger than the content.

What does the fr unit do?

It splits the space left after fixed sizes and gaps. 2fr 1fr gives the first track twice the share of the second.

How do I make the grid responsive?

Replace the fixed count with repeat(auto-fill, minmax(200px, 1fr)), which fits as many columns as the width allows and needs no media query.

Do the grid items need CSS of their own?

Not for a basic layout — all of this is on the container. Items only need their own rules (grid-column, grid-row) to span or be placed on specific lines.

Should I use grid or flexbox?

Grid for two-dimensional layouts where rows and columns align; flexbox for a single row or column of items.