About this tool
CSS Grid Visualizer helps you design grid layouts by adjusting properties and seeing the results instantly. Use the inputs to set columns, rows, gap, and alignment, then copy the generated CSS directly into your project. Click cells in the preview to toggle span behavior.
Frequently asked questions
Why does changing columns not update the preview immediately?
The preview updates on every input change. If you don't see changes, try pressing Enter after typing a custom value (e.g., "100px 200px").
What happens with 25+ items?
The max is 24 to keep the preview readable. More items just wrap to more rows based on your grid template.
Can I use CSS functions like minmax()?
Yes. Try values like repeat(3, minmax(100px, 1fr)) or auto-fit / auto-fill patterns. The preview will render as the browser interprets them.
How do I copy just the grid properties?
Click "Copy CSS" to get the complete display: grid; ... block. Paste it on any container and adjust the item count as needed.