CSS Grid Generator

Build CSS Grid layouts visually with customizable columns, rows, and gaps.

Processed on your device — never uploaded
1
2
3
4
5
6
7
8
9
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, auto);
column-gap: 10px;
row-gap: 10px;

Frequently Asked Questions

What is CSS Grid Layout?
CSS Grid is a two-dimensional layout system that lets you define rows and columns simultaneously, making it ideal for building complex page layouts.
What does the fr unit mean in CSS Grid?
The fr (fraction) unit represents a fraction of the available space in the grid container. For example, 1fr 2fr creates two columns where the second is twice as wide as the first.
How do I set gaps between grid items?
Use the column-gap and row-gap properties (or the shorthand gap) to add spacing between grid cells without affecting the outer edges.
Can I mix fr units with fixed sizes in CSS Grid?
Yes, you can freely combine fr units with px, %, em, or minmax() values in grid-template-columns and grid-template-rows for flexible yet controlled layouts.