.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 handles both rows and columns simultaneously. Unlike Flexbox (one-dimensional), Grid lets you define exact column and row structures, creating complex layouts with precise control. Grid excels at page layouts, dashboard designs, and any structure requiring both horizontal and vertical alignment control.
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.