CSS Grid Generator

Build CSS Grid layouts visually. Set columns, rows and track sizes with fr, px, %, auto or minmax, adjust gaps, auto-flow and alignment, place items explicitly without overlaps, try a random layout and copy the CSS.

Developer Runs client-side Free to use

Jump to the tool

About the CSS Grid Generator

CSS Grid Generator helps you design a grid layout and see it immediately. Choose up to 12 columns and 12 rows and give every track the same size or a size of its own, using safe controlled choices: fr, px, %, auto or minmax(px, fr). Set the column and row gap, the container width and height, grid-auto-flow and all four alignment properties — justify-items, align-items, justify-content and align-content — and change how many numbered sample items fill the grid.

Select an item to give it an explicit grid-column and grid-row with a span, or its own justify-self and align-self. The tool checks every placement: an item may not extend past the explicit grid or overlap another explicitly placed item, and placements that no longer fit after you shrink the grid are switched back to automatic placement with a note. A Random Layout button produces a valid layout from controlled values. The generated CSS uses repeat() where tracks match and nth-child rules only for items you changed.

How to use

Set the number of columns and rows, then choose their track sizes.
Adjust the gaps, container size, auto-flow and alignment options.
Select an item in the preview (or tick Edit a single item) to place it explicitly or align it individually.
Fix any placement warnings, or try Random Layout for ideas.
Copy the CSS or download it as a .css file.

Key features

Up to 12 columns and 12 rows with fr, px, %, auto and minmax(px, fr) track sizes.
Same size for every track or a size for each track.
Column and row gaps, container size, grid-auto-flow including dense packing.
justify-items, align-items, justify-content and align-content.
Explicit item placement with spans, plus justify-self and align-self, with overlap and bounds checks.
Random Layout, Copy CSS, Download .css and Reset.

Best practices

Use fr units for flexible columns and minmax() to keep columns from becoming too narrow.
Give rows a fixed or auto size; fr rows only share space when the container has a definite height.
Avoid overlapping placements unless you intend items to stack.
Keep the HTML in a logical reading order — grid placement changes only the visual layout.
Test the layout at narrow widths and add media queries where columns need to collapse.

Benefits

See how track sizes, gaps and alignment interact without writing code first.
Generate valid, readable grid CSS quickly.
Avoid placement mistakes thanks to built-in bounds and overlap checks.
Runs entirely in your browser.

Frequently asked questions

What is the difference between fr, px, % and auto?

px is a fixed size and % is a share of the container. fr shares the remaining free space between fr tracks, and auto sizes a track to fit its content. minmax(min, max) keeps a track at least the minimum size and lets it grow up to the maximum.

Why can’t I place an item in some positions?

An explicitly placed item must stay inside the explicit grid you defined and may not overlap another explicitly placed item. The tool shows which item would overlap so you can move or shrink one of them.

What happens when there are more items than cells?

The browser creates extra implicit rows (or columns, with column auto-flow) sized auto to hold them. The tool tells you when this happens; implicit tracks are not part of the generated template.

What does grid-auto-flow dense do?

Dense packing lets the browser fill earlier gaps with later items that fit, which can change the visual order of items. It is useful for galleries but can confuse readers if order matters.

What does the generated CSS include?

A .grid-container rule with the template, gap, auto-flow, alignment and size, plus .grid-item:nth-child(n) rules for items you placed or aligned individually.

Which browsers support CSS Grid?

The generated CSS is standard CSS Grid supported by all current major browsers. Very old browsers are not targeted.