CSS Grid Generator
Design complex two-dimensional layouts visually.
Grid Generator
Design complex CSS grid layouts visually.
Layout Presets
Columns
3
Rows
3
Live Playground
1
2
3
4
5
6
7
8
9
RESIZE GRID
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 16px;
}Mastering CSS Grid
CSS Grid is a powerful 2-dimensional layout system. Unlike Flexbox, which is primarily 1-dimensional (handling either rows OR columns), Grid can easily handle both simultaneously.
Understanding Grid Tracks and Units
A grid consists of columns and rows (tracks). You can define the size of these tracks using standard units like px or %, but the real power of Grid lies in the fractional fr unit.
1frrepresents one fraction of the available free space in the grid container.- If you have three columns set to
1fr 2fr 1fr, the container is divided into 4 total fractions. The middle column will be exactly twice as wide as the outer columns.
The Repeat Function
When writing the CSS by hand, you often have repeating patterns. Instead of writing 1fr 1fr 1fr 1fr, CSS provides the repeat() function: repeat(4, 1fr). Our generator automatically simplifies your output using the repeat function where possible!
Related Guides
Deepen your understanding with our expert articles.