CSS Grid Generator

Build CSS Grid layouts visually. Adjust columns, rows, and gaps - then copy the generated CSS.

Last reviewed: June 2026
Reviewed by , software engineer · last updated June 2026

New to this tool? Click here for instructions

Click a cell to toggle column span. Blue = spanned.

Generated CSS
Adjust the controls above to build your grid layout.

How the CSS Grid Generator works

The generator is a local CSS builder. Slider changes, template edits, mode switches, gap controls, and clicked preview cells are translated into CSS Grid declarations in the page's own JavaScript. There is no backend request for layout generation; the preview and output update from the current browser state.

Use explicit grid mode when you know the exact number of tracks. Use auto-fill or auto-fit when the grid should adapt to available width. Use named lines when the generated CSS needs semantic placement hooks such as [sidebar-start], [content-start], and [content-end].

Practical layout guidance

  • Use fr for flexible space: 1fr 2fr gives the second track twice the leftover width of the first.
  • Use minmax() for responsive cards: repeat(auto-fit, minmax(16rem, 1fr)) avoids fragile breakpoint-only layouts.
  • Use gaps instead of margins: gap keeps spacing tied to the grid container and reduces child-specific overrides.
  • Validate spans: a preview span that looks good with placeholder cells may still need content-length testing in the real component.

Worked example

For a product-card gallery, choose auto-fit mode, set the minimum column size around 16rem, and use a 16-24 px gap. The generated grid-template-columns pattern lets the layout collapse from four columns to one without a custom media query.

Sources

Frequently Asked Questions

CSS Grid is a two-dimensional layout system that allows you to create complex, responsive layouts by dividing a container into rows and columns.
Both modes use `repeat()` with either `auto-fill` or `auto-fit` as the track count. They behave identically when the grid is full. The difference only appears when there are fewer items than columns that would fit. `Auto-fill` keeps empty column tracks, while `auto-fit` collapses empty tracks.
Click on a cell to toggle a column span. Spanned cells will appear in purple.
In CSS Grid, `fr` stands for 'fraction'. It represents a fraction of the available space in the grid container. When you use `fr` in a grid template, it distributes the available space proportionally among the tracks.
It turns the visual controls into CSS Grid declarations in your browser, then shows the result in the preview and generated CSS panel.

Grid output checklist

Common CSS Grid decisions
DecisionUse whenExample
Explicit tracksThe layout always needs a fixed track count.grid-template-columns: 240px 1fr;
Auto-fit cardsCards should stretch to fill each row.repeat(auto-fit, minmax(16rem, 1fr))
Auto-fill cardsEmpty tracks should remain reserved.repeat(auto-fill, minmax(12rem, 1fr))
Named linesPlacement should be readable in code review.[nav] 12rem [main] 1fr