CSS Grid Generator
Create and customize CSS Grid layouts with a visual interface.
Grid Preview
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Grid Properties
Generated Code
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
justify-items: stretch;
align-items: stretch;
}
.grid-item-1 {
grid-column: 1;
grid-row: 1;
background-color: #3b82f6;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
border-radius: 0.5rem;
}
.grid-item-2 {
grid-column: 2;
grid-row: 1;
background-color: #10b981;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
border-radius: 0.5rem;
}
.grid-item-3 {
grid-column: 3;
grid-row: 1;
background-color: #f59e0b;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
border-radius: 0.5rem;
}
.grid-item-4 {
grid-column: 1;
grid-row: 2;
background-color: #ef4444;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
border-radius: 0.5rem;
}
.grid-item-5 {
grid-column: 2;
grid-row: 2;
background-color: #8b5cf6;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
border-radius: 0.5rem;
}
.grid-item-6 {
grid-column: 3;
grid-row: 2;
background-color: #06b6d4;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
border-radius: 0.5rem;
}Quick Presets
🔒 Your data never leaves your browser - all processing happens locally