CSS Grid Generator
Build a CSS Grid layout visually - columns, rows, gaps, and item placement - with a live preview.
Set the number of columns/rows and gap, then adjust item placement - the grid preview updates live.
For a simpler one-dimensional layout instead, see the CSS Flexbox Generator.
What Is CSS Grid?
CSS Grid is a two-dimensional layout system - a grid container is divided into rows and columns (tracks), and grid items are placed into cells or spans across that grid.
Why Use This Tool?
The grid-template-columns/grid-template-rows track syntax (especially with fr units and repeat()) is compact but not always intuitive - seeing the resulting grid live makes the sizing behavior clear.
How to Use It
- Set the number of columns and rows, and the gap between them.
- Adjust individual item placement (column/row span) if needed.
- Copy the generated container and item CSS.
Limitations
This covers common explicit grid definitions - CSS Grid's more advanced features (named grid areas, auto-placement algorithms, subgrid) aren't fully covered by this generator.