CSS Grid Generator

About this tool

Build a CSS grid layout visually — set the number of columns and rows, gaps, and item alignment, watch a live preview, then copy the generated grid-template-columns/grid-template-rows CSS for your container.

Frequently asked questions

Why does this use repeat(N, 1fr) instead of listing sizes individually?

repeat(N, 1fr) creates N equal-width tracks in one compact expression — the most common starting point for a grid. For custom column widths (e.g. a fixed sidebar plus a flexible main area), edit the generated CSS by hand afterward.

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

justify-items aligns each item horizontally within its grid cell; align-items aligns it vertically — together they control where content sits inside a cell that's larger than the content itself.

Do the grid items need any CSS of their own?

Not for a basic layout — everything here applies to the grid container (display: grid). Individual items can additionally use grid-column/grid-row to span multiple tracks, which this generator doesn't cover.