CSS Grid Generator

What this tool does

CSS Grid Generator is an interactive playground for setting up a grid container’s columns, rows and gap using the repeat(n, 1fr) shorthand, with a live preview showing exactly how a set of grid items arranges itself, and the resulting container CSS ready to copy.

Setting up a basic CSS grid, how many evenly sized columns and rows, how much gap between them, is simple in concept but easy to get the syntax slightly wrong without a visual check.

This playground lets you set the number of columns, rows and gap, previewing a set of grid items arranging themselves immediately, with the resulting container CSS using the common repeat(n, 1fr) evenly-sized-tracks shorthand.

How to use CSS Grid Generator

1. Set the number of columns and rows.
2. Set the gap between grid cells.
3. Adjust the number of preview items to see how they fill the grid.
4. Copy the resulting container CSS.

Tips for better results

• The repeat(n, 1fr) shorthand creates n equally sized tracks (columns or rows), the simplest and most common grid setup for evenly distributed content.
• If you have more items than grid cells (columns × rows), extra items automatically flow onto additional implicit rows beyond what’s explicitly defined.
• The gap property adds spacing only between grid cells, never around the outer edge of the grid container itself, use padding on the container for outer spacing.
• This playground covers evenly-sized tracks only; CSS Grid also supports differently sized tracks (like grid-template-columns: 200px 1fr 1fr) and named grid areas for more complex layouts, both beyond this simple generator’s scope.

Common use cases

• Quickly prototyping a photo gallery, card grid, or dashboard layout’s basic structure.
• Learning how CSS Grid’s column/row/gap properties behave by experimenting visually.
• Generating the exact container CSS for a simple, evenly distributed grid layout.
• Checking how a given number of items naturally wraps across rows for a specific column count.

Common mistakes to avoid

• Expecting this simple generator to produce differently sized tracks or named grid areas; it covers the common evenly-sized repeat(n, 1fr) pattern only, more advanced grid layouts need manual CSS beyond this tool’s scope.
• Forgetting that items beyond the defined columns × rows capacity flow onto additional implicit rows automatically, rather than being cut off or causing an error.
• Confusing gap with padding, gap only adds spacing between grid cells, it doesn’t add any space around the outside edge of the grid container itself.