Back to Tools
CSS Grid Generator
CSS Grid Generator
Build complex grid structures visually and accurately
Grid Master
Live Grid Visualization
About the CSS Grid Generator
Build a CSS grid layout visually.
How to use the CSS Grid Generator
- Set the number of columns and rows and the Gaps, using units such as 1fr or 100px.
- Under Item Placement, set the Col Span, Row Span and an optional Area Name for each item.
- Press Generate Grid CSS, then Copy CSS.
Formula and method
A three-column grid: display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
When to use the CSS Grid Generator
- Laying out a page with a header, sidebar, content and footer.
- Creating photo galleries and card grids with equal columns.
- Placing items across several rows and columns with spans.
- Learning how grid-template-columns and gaps work by adjusting them visually.
Common mistakes to avoid
- Using fixed pixel widths for every column, which breaks on small screens. Use fr units or minmax() instead.
- Forgetting that grid items can overlap when you place several in the same cell.
- Using grid for a simple one-dimensional row where flexbox would be easier.
Tips
- The fr unit shares the free space in proportion.
- Named areas make complex layouts easier to read.
- repeat(auto-fit, minmax(200px, 1fr)) creates a responsive grid without media queries.
- Named grid areas make complex layouts easier to read and change.
Frequently Asked Questions
One fraction of the available space in the grid.
Flexbox arranges items in one direction, either a row or a column. Grid controls rows and columns together.
A fraction of the free space. 1fr 2fr divides the space into three parts, giving the second column twice as much as the first.
Use grid-column: span 2; on that item.