CSS Grid Generator
Build CSS Grid layouts visually. Customize columns, rows, gaps, and alignment with a live preview.
Preview
1
2
3
4
5
6
7
8
9
CSS
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
column-gap: 10px;
row-gap: 10px;
justify-items: stretch;
align-items: stretch;
}Frequently Asked Questions
What is CSS Grid?+
CSS Grid is a two-dimensional layout system that lets you control both rows and columns simultaneously. It's ideal for complex page layouts, dashboards, and image galleries.
What does fr unit mean?+
The fr unit represents a fraction of the available space in the grid container. '1fr 2fr' means the second column gets twice as much space as the first. It's similar to flex-grow but for grid tracks.
When should I use Grid vs Flexbox?+
Use Grid for two-dimensional layouts (rows AND columns) like page layouts, dashboards, and galleries. Use Flexbox for one-dimensional layouts (a single row or column) like navigation bars and card rows.