About CSS Grid
The CSS Grid Generator helps you build two-dimensional grid layouts visually. Set the number of columns and rows, the gap and the column sizing, and a live grid renders so you can see the result — then copy the grid-template CSS. It is perfect for page layouts, galleries and dashboards.
How CSS Grid works
How to build a grid
- Set the number of columns and rows and the gap between cells.
- Choose how columns are sized — equal fractions (fr), auto, minmax or fixed.
- Preview the grid and copy the generated CSS.
fr units and repeat()
The fr unit splits available space into fractions, so repeat(3, 1fr) makes three equal columns. minmax(100px, 1fr) keeps columns at least 100px while letting them grow — great for responsive grids.
Grid vs Flexbox
Use Grid when you need rows and columns (a full layout or gallery); use Flexbox for a single row or column of items.
Common uses
- Lay out a page into columns and rows
- Build image galleries
- Create dashboard card grids
- Make responsive product listings
- Design a photo or portfolio grid
- Learn grid-template syntax
- Set consistent gaps between cells
- Copy ready-made Grid CSS
Frequently asked questions
How do I make a CSS grid?
Set display:grid and grid-template-columns. This tool builds the template visually and gives you the code.
What does 1fr mean?
One fraction of the available space — repeat(3, 1fr) creates three equal columns.
How do I make a responsive grid?
Use minmax with fr, e.g. repeat(auto-fill, minmax(150px, 1fr)).
What is the gap property?
It sets the spacing between grid rows and columns.
When should I use Grid over Flexbox?
Use Grid for two-dimensional layouts (rows and columns); Flexbox for one dimension.
Is the CSS production-ready?
Yes — copy it straight into your stylesheet.
Is anything uploaded?
No — it runs entirely in your browser.
Is it free?
Yes — completely free with no sign-up.