CSS grid generator

How to use it

1. Set the number of columns and rows. Each one gets a size row below.
2. Choose a size type per track: fr for flexible shares, px for a fixed size, auto to fit the content, or minmax for a minimum in pixels that can still grow.
3. Set the column and row gaps.
4. Set the number of items. To make one larger, select it and raise its spans.
5. Copy the CSS and the HTML.

What the output means

The .grid rule has display: grid, the two template lines and a gap. When the gaps differ, the shorthand is written row first, then column: gap: 8px 16px. Items with a span get their own .item-N rule; other items need no rule, because the browser places them in order.

Example

Three equal columns and two auto rows with a 16px gap give grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); gap: 16px;. Setting item 2 to span two columns adds .item-2 { grid-column: span 2; }.

Tips

• Use minmax() columns for cards that should wrap into fewer columns on small screens, together with repeat(auto-fit, ...) written by hand.
• Items placed by spans can leave holes. Add grid-auto-flow: dense yourself if you want the browser to fill them.
• This tool does not draw named areas; for those, write grid-template-areas on top of the generated rule.