🔲 CSS Grid Generator — Visual Grid Builder
Visual CSS Grid builder: set columns, rows, gap, preview live, and copy grid-template-columns/rows code.
📚 About This Tool
CSS Grid divides a container into a 2D grid. grid-template-columns sets columns, grid-template-rows sets rows, gap spaces them. fr means "fraction" — repeat(3, 1fr) is 3 equal columns.
❓ FAQ
What is fr in Grid?
A "fraction" unit — divides available space. 1fr 2fr means a column of ⅓ then a column of ⅔.
How do I span an item across columns?
Use grid-column: span 2 to span two columns.
When use Grid vs Flex?
Grid for full page layouts (header/sidebar/main/footer); Flex for small components (toolbar, card).
Does Grid support RTL?
Yes. Add direction: rtl on the container or html element to reverse columns.