CSS Grid Generator
Build CSS Grid layouts visually — set columns, rows, gaps and alignment — with a live preview and copy-ready grid CSS.
About the CSS Grid Generator
This CSS Grid generator builds two-dimensional layouts with simple controls: choose how many columns and rows you want, set the gap, pick alignment, and see a live grid preview update instantly. Copy the generated grid-template-columns, grid-template-rows and gap CSS straight into your project.
CSS Grid is the most powerful layout system in CSS, designed for page and component structures with explicit rows and columns — dashboards, image galleries, card decks and full-page layouts. Using fr units, the generator produces flexible tracks that share available space proportionally and adapt to any screen size.
Everything runs in your browser, making it both a productivity tool and a hands-on way to learn how grid tracks, gaps and alignment interact.
How to Use the CSS Grid Generator
- 1Set the number of columns and rows.
- 2Adjust the gap and, if you like, the track sizing.
- 3Choose how items align within their cells.
- 4Copy the generated grid CSS into your stylesheet.
Frequently Asked Questions
What does the fr unit mean in CSS Grid?
fr stands for 'fraction of the available space'. grid-template-columns: 1fr 1fr 1fr makes three equal columns that split the leftover width after gaps. Mixing units like 200px 1fr gives a fixed sidebar and a flexible main column. fr units are what make grid layouts fluidly responsive.
How do I create a responsive grid without media queries?
Use repeat(auto-fit, minmax(200px, 1fr)) for the columns: the grid fits as many 200px-minimum columns as the container allows and stretches them to fill the row, wrapping automatically as the screen shrinks. It's a one-line responsive gallery. This generator can output repeat()-based tracks.
What is the difference between gap, row-gap and column-gap?
gap is shorthand for the space between grid tracks. row-gap sets the vertical spacing between rows and column-gap the horizontal spacing between columns; gap: 16px sets both, while gap: 16px 24px sets row and column gaps separately. Gaps apply only between tracks, not on the outer edges.
When should I use Grid instead of Flexbox?
Grid is built for two-dimensional layouts where you control both rows and columns at once — page skeletons, dashboards and galleries. Flexbox handles one dimension at a time and is ideal for navbars and button rows. They complement each other, and complex UIs often nest Flexbox components inside a Grid layout.
Do I need vendor prefixes for CSS Grid?
Not for modern browsers — Grid has been unprefixed and widely supported since 2017. Only very old Internet Explorer used a different prefixed syntax. The CSS this tool generates works in every current browser as-is.