Build CSS Grid layouts visually — set columns, rows and gaps, then copy the generated CSS. Free online tool, no sign-up needed.
How to use CSS Grid Generator?
Set the number of rows and columns.
Drag cells to merge areas or adjust placement.
Copy the generated CSS Grid code and use it in your project.
Frequently asked questions about CSS Grid Generator
What is the difference between CSS Grid and Flexbox?
CSS Grid is for 2D layouts (rows + columns), while Flexbox is for 1D layouts (row or column). Grid is better suited for complex page layouts.
What is the fr unit?
fr (fraction) is a proportional unit used in CSS Grid. For example, 1fr 2fr divides space in a 1:2 ratio. It's very useful for responsive layouts.
Can I build a responsive grid without media queries?
Yes. Writing repeat(auto-fit, minmax(240px, 1fr)) fixes only the minimum column width and lets the browser work out the rest: columns are added as the viewport grows and removed as it shrinks, covering phone to desktop without a single breakpoint. Note that auto-fill leaves empty tracks in the leftover space while auto-fit stretches the existing ones to fill it, so the two differ when there are few items.
A long word stretches one grid column and breaks my layout.
Grid items default to a minimum size of auto, which means they refuse to shrink below their content — a long URL or an unbreakable word pushes the whole column open. Setting min-width: 0 on that item lets the grid shrink it again, and adding overflow-wrap: anywhere makes the long string wrap. Defining the track as minmax(0, 1fr) instead of plain 1fr removes the cause outright, which is why it is so common.
How to get the most out of CSS Grid Generator?
repeat(auto-fit, minmax(240px, 1fr)) reflows on its own — no media queries needed.
Use gap instead of margins so the last column doesn't end up with stray spacing.
For complex layouts, name the regions with grid-template-areas; it stays readable months later.