CSS Grid Generator
Design multi-column, multi-row responsive layouts visually. Adjust column spans, row placements, and gaps with immediate production-ready CSS code.
Container Matrix
Grid Items (3)
Live Interactive Canvas
Generated CSS Code
.parent-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 16px;
grid-row-gap: 16px;
}
.div1 {
grid-area: 1 / 1 / 2 / 5;
}
.div2 {
grid-area: 2 / 1 / 4 / 2;
}
.div3 {
grid-area: 2 / 2 / 4 / 5;
}CSS Grid Essentials
The `fr` unit represents a fraction of the available space inside the grid container, dynamically shrinking and stretching with viewport changes.
Grid tracks are the rows and columns, while grid lines are the dividing borders. A 4-column grid has 5 column lines (1 through 5).
Defines the bounding box of a child item: `grid-area: row-start / col-start / row-end / col-end;` without needing multiple properties.
Frequently Asked Questions
How can I make the grid responsive?
Use `repeat(auto-fit, minmax(280px, 1fr))` to automatically adapt columns based on the screen width without manual media queries.
Does CSS Grid replace Flexbox?
No, they complement each other! Modern web development uses CSS Grid for the macro layout (overall page structure, sidebars, content grids) and Flexbox for micro layouts (cards, navbars, button groups).