CSS Grid Generator

Features

• 1 to 12 columns and rows
• Four column sizing strategies including responsive minmax
• Click cells to make them span two columns
• Optional named grid areas
• Generates matching CSS and HTML

How to use it

1. Set the number of rows and columns.
2. Choose a sizing strategy.
3. Click any cell to toggle a two-column span.
4. Copy the CSS and HTML into your project.

fr units, minmax and the auto-fit trick

The fr unit distributes leftover space after fixed-size items and gaps are accounted for. Three columns of 1fr each are equal; 2fr 1fr gives the first column twice the remaining space. Crucially, fr handles gaps correctly, which is why it is better than percentages, three columns of 33.33% plus gaps overflows the container, while three 1fr columns never do.

The single most useful grid pattern needs no media queries at all: grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). This fits as many columns as will hold 250 pixels each, then stretches them to fill the row, reflowing automatically as the container resizes. Using auto-fit instead of auto-fill collapses empty tracks so a single item stretches full width, which is usually what you want for a card grid.

One trap worth knowing: grid items have a default min-width: auto, which means a track will refuse to shrink below the intrinsic width of its content. A long unbroken string or a wide image can therefore blow out your entire layout even with 1fr columns. The fix is minmax(0, 1fr) rather than plain 1fr, which lets the track shrink properly.