Grid settings
Live preview
Generated CSS
Frequently asked questions
Can I change the item count?
Yes. The item slider goes up to 36, and the tool caps it at columns times rows so items never overflow the grid.
What does the Surprise me button do?
It generates a random grid configuration so you can explore layouts quickly. Every random result is still valid, copyable CSS.
Is the CSS responsive?
The generated code uses fractional units (fr), so columns flex with the container width. For breakpoint-specific layouts, pair it with your own media queries.
Preview
Related free tools
Free CSS Button Generator | Style Buttons Online
Free CSS button generator. Customize colors, padding, and radius with live preview, then c
Free HEX RGB HSL Color Converter
Free color converter. Convert between HEX, RGB and HSL instantly, preview the color and co
Free Color Contrast Checker | WCAG Accessibility Tool
Free color contrast checker. Test text and background colors against WCAG AA and AAA stand