CSS Grid Generator

Build CSS Grid layouts visually — adjust columns, rows, gaps, and copy.

1
2
3
4
5
6
7
8
9
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
column-gap: 8px;
row-gap: 8px;

CSS Grid Generator — What It Does

Key CSS Grid Properties

Common Grid Patterns

Tips and Gotchas

Frequently Asked Questions

What does the fr unit mean in CSS Grid?
fr stands for "fractional unit" and represents a fraction of the available space in the grid container. For example, grid-template-columns: 1fr 2fr creates two columns where the second is twice as wide as the first. Unlike percentages, fr units account for gaps and fixed-size tracks automatically.
How is CSS Grid different from Flexbox?
CSS Grid is two-dimensional — it manages both rows and columns simultaneously, making it ideal for full-page layouts and complex component grids. Flexbox is one-dimensional, controlling either a row or a column at a time, and is better suited for component-level alignment like navigation bars and toolbars. They complement each other and are often used together.
What is the difference between grid-template-columns and grid-auto-columns?
grid-template-columns explicitly defines the size of named columns in the grid. grid-auto-columns defines the size of implicitly created columns — those generated when items are placed outside the explicitly defined grid. Use grid-auto-columns to handle overflow items without knowing their count in advance.
How do I make a responsive grid without media queries?
Use the repeat() function with auto-fill or auto-fit and minmax(). For example: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)). auto-fill keeps empty columns, while auto-fit collapses them. This creates a fully responsive grid that reflows automatically based on container width.
How do I span an item across multiple columns or rows?
Use grid-column: span N or grid-column: start / end on the grid item. For example, grid-column: span 2 makes the item occupy two column tracks. grid-column: 1 / -1 stretches the item from the first to the last line, spanning the full width. The same syntax applies to grid-row.