🟦 CSS Grid Generator
Visual CSS Grid builder. Adjust columns, rows, gap → copy CSS or Tailwind.
👁️ Live Preview
1
2
3
4
5
6
7
8
9
Columns: 3
Rows: 3
Gap: 8px
CSS
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px;Tailwind
grid grid-cols-3 grid-rows-3 gap-2📚 Grid Quick Reference
- 📐 fr unit: Fraction of available space (1fr 1fr = equal halves)
- 📐 auto: Sized to content
- 📐 repeat(N, X): Shorthand for N copies of X
- 📐 minmax(min, max): Responsive sizing constraint
- 💡 Grid is for 2D layouts (rows AND columns); Flexbox is for 1D