CSS Grid Generator

Build a CSS grid layout visually and copy the generated code.

Presets:

Columns

Rows

Col gap (px)

Row gap (px)

Track size

Total Cells: 6Grid Layout: 3 × 2Col Gap: 12pxRow Gap: 12pxTrack Unit: frCSS Size: 122 B

Live preview

CSS Code

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
column-gap: 12px;
row-gap: 12px;

Getting started with CSS Grid

CSS Grid lays out elements in two dimensions at once. Set display: grid on a container, then define columns and rows with grid-template-columns and grid-template-rows. The fr unit splits free space into flexible fractions, auto sizes to content, and fixed px tracks stay constant. Adjust the controls above and copy the result — it's generated entirely in your browser.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Building a grid layout visually and copying the generated CSS.
Getting named template areas right without hand-writing them.
Producing a responsive grid with auto-fit columns.
Comparing two column definitions side by side.
Reproducing a layout a designer supplied as a wireframe.

Frequently Asked Questions

What does the fr unit actually mean?: A fraction of the FREE space left after fixed sizes and gaps are subtracted — not a fraction of the container. That distinction is why `1fr 1fr` with a 20px gap gives two equal columns rather than two halves that overflow, and why `fr` and percentages behave differently.
Why does 1fr overflow when its content is wide?: Because a grid track's minimum size defaults to `auto`, which is at least its content's minimum. A long unbroken string or a wide image pushes the track past its share. `minmax(0, 1fr)` sets the floor to zero and is the standard fix for a grid item that refuses to shrink.
When should I use auto-fit rather than auto-fill?: `auto-fit` collapses empty tracks so the remaining items stretch to fill the row; `auto-fill` keeps them, leaving gaps. With `repeat(auto-fit, minmax(200px, 1fr))` three cards spread across a wide screen; with `auto-fill` they stay 200px and leave the rest empty.
Grid or flexbox?: Grid for two-dimensional layout where rows and columns both matter and the container decides the structure. Flexbox for one dimension where the items decide their own sizes. A row of buttons is flexbox; a page shell or a card gallery is grid — and nesting one inside the other is normal.
Does grid-template-areas do anything CSS cannot do otherwise?: Nothing structural — it is line-based placement with names. What it buys is readability: the rule visually diagrams the layout, and rearranging it for a breakpoint is a matter of rewriting the picture rather than recalculating a dozen line numbers.

Common errors and gotchas

Using fixed column widths where `minmax` and `auto-fit` would adapt.
Setting explicit row and column placement that breaks as soon as content changes.
Confusing gap with margin, where gap applies only between tracks and not outside them.
Naming template areas inconsistently across breakpoints, which silently drops items.
Assuming grid order matches DOM order, which affects keyboard and screen-reader sequence.