.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 8px;
justify-items: stretch;
align-items: stretch;
}Visual CSS Grid generator. Adjust columns, rows, gap, and alignment with live preview of your grid layout.
What is CSS Grid Generator?
CSS Grid is a two-dimensional layout system that simultaneously controls both rows and columns, enabling complex page structures that were previously impossible or required elaborate workarounds. Unlike Flexbox, which operates along a single axis, Grid lets you define an explicit grid with specific column and row tracks, then place items precisely within that structure. The repeat() function with fr (fraction) units creates flexible column layouts that distribute available space proportionally, while the gap property ensures consistent spacing between all cells. Grid excels at full-page layouts with header/sidebar/main/footer regions, dashboard designs with varying widget sizes, image galleries with uniform cells, and any design where content must align both horizontally and vertically. This generator creates the grid container CSS with configurable columns, rows, gap, and item alignment properties.
How to Use
- Set number of columns (1-6 for this generator)
- Set number of rows for grid height
- Adjust gap for spacing between cells
- Choose justify-items for horizontal cell alignment
- Select align-items for vertical cell alignment
- Copy generated CSS to your stylesheet
Why Use This Tool?
Tips & Best Practices
- Grid is best for page-level layouts
- Use fr units for flexible column widths
- Combine with Flexbox for component-level layouts
- gap replaces margin-based grid spacing
- justify-items/align-items affect content within cells
- For responsive grids, use auto-fill/auto-fit
Frequently Asked Questions
What's the difference between Grid and Flexbox?
Grid is two-dimensional (rows AND columns simultaneously), Flexbox is one-dimensional (single row OR column). Use Grid for overall page structure, complex layouts with defined rows/columns. Use Flexbox for components, navigation bars, centering items. Often used together: Grid for page, Flexbox within grid cells.
What are fr units?
fr (fraction) units distribute available space proportionally. 1fr means one fraction of remaining space. repeat(3, 1fr) creates three equal-width columns. 2fr column gets twice the space of 1fr column. fr units are flexible, adapting to container size.
What do justify-items and align-items do?
justify-items aligns grid item content horizontally within its cell. align-items aligns vertically. Options: start, end, center, stretch (fill cell). These affect content inside cells, not the cells themselves.
How do I make responsive grids?
Use auto-fill or auto-fit with minmax(): grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). This creates as many columns as fit, each at least 200px, sharing remaining space. Columns automatically adjust as container resizes.
Can I place items in specific cells?
Yes - use grid-column and grid-row properties on items: grid-column: 1 / 3 spans columns 1-2. grid-row: 2 / 4 spans rows 2-3. This generator creates the grid container; you can manually add placement to specific items.
What is grid gap?
gap sets spacing between grid cells (rows and columns). Same as Flexbox gap. Creates uniform spacing throughout the grid. Can also set row-gap and column-gap separately for different horizontal/vertical spacing.
Is my layout data kept private?
Yes. All grid generation happens locally in your browser. No CSS values or layout configurations are ever sent to a server or stored anywhere.
When should I NOT use CSS Grid?
Avoid Grid for simple one-dimensional layouts like navigation bars or single rows of buttons — Flexbox is simpler and more appropriate. Also skip it when you need content to flow naturally without explicit row/column definitions, or when supporting very old browsers (IE11 has partial Grid support with different syntax). For layouts where items need to overlap or be positioned absolutely, Grid may add unnecessary complexity.
Real-world Examples
Creating a dashboard layout with sidebar
A classic dashboard uses a fixed sidebar on the left and a main content area. Grid makes this structure explicit and easy to maintain.
Columns: 2, Rows: 1, Gap: 16px, Justify: stretch, Align: stretch
.dashboard {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(1, 1fr);
gap: 16px;
justify-items: stretch;
align-items: stretch;
}Building a photo gallery grid
An image gallery with equal-sized cells and consistent gaps between photos is a perfect use case for CSS Grid.
Columns: 3, Rows: 2, Gap: 8px, Justify: center, Align: center
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 8px;
justify-items: center;
align-items: center;
}