Grid Generator
Create complex CSS Grid layouts with live preview and code export
Drag cards in the preview to snap them to grid cells.
Grid stack
Grid Items
Hold the dots and drag grid items up or down to reorder them.
Item 1
Item 2
<div class="grid-container">
<div class="grid-item-1">Item 1</div>
<div class="grid-item-2">Item 2</div>
</div>.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
column-gap: 16px;
row-gap: 16px;
grid-auto-flow: row;
justify-items: stretch;
align-items: stretch;
justify-content: start;
align-content: start;
}
.grid-item-1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
background-color: #667eea;
}
.grid-item-2 {
grid-column: 2 / 4;
grid-row: 1 / 3;
background-color: #764ba2;
}Unlock Pro features for your team
Get API access, priority support, and advanced export options. Perfect for agencies and product teams.
Full API access
Priority support
Team collaboration
Advanced exports
CSS Grid Generator Features
- Visual Builder — Create complex grid layouts using an intuitive visual interface. See changes in real-time as you adjust columns and rows.
- Flexible Units — Use fr, px, %, auto, min-content, max-content and other units. Combine them to create responsive layouts.
- Grid Template Areas — Define named grid areas for semantic content placement. Create complex layouts with ease and readability.
- Gap & Spacing — Configure spacing between columns and rows separately or together. Support for new gap properties instead of deprecated grid-gap.
- Auto-placement — Automatic element placement in the grid with flow direction control. Configure packing density for optimal space usage.
- Ready Templates — Collection of popular layouts: Holy Grail, cards, galleries, dashboards. Use as a starting point for your project.
How to Use Grid Generator
- Define the number of columns and rows for your grid
- Configure the size of each column and row using appropriate units
- Add gaps between elements using gap properties
- Place elements in the grid by specifying their positions
- Use named areas for semantic placement
- Copy the generated CSS and HTML code for use in your project
Why Use CSS Grid
CSS Grid is the most powerful layout system in CSS, allowing you to create two-dimensional layouts with full control over rows and columns. Unlike Flexbox, Grid is perfect for creating complex page layouts, dashboards, and responsive interfaces. Grid automatically manages alignment, supports element overlapping, and greatly simplifies creating responsive designs without media queries.
CSS Grid FAQ
Grid is designed for two-dimensional layouts (rows and columns), while Flexbox is for one-dimensional (row only or column only). Grid is better for overall page structure, Flexbox for components.
Modern versions of all browsers fully support CSS Grid. IE11 supports the old specification with -ms- prefix but with limitations. For critical projects, use Flexbox as a fallback.
Fr (fraction) represents a fraction of the free space in the grid container. 1fr 1fr 1fr will create three equal columns that take up all available space.
Use minmax(), auto-fit, and auto-fill functions for automatic adaptation. You can also use media queries to change grid-template-columns on different screens.