CSS & Design
CSS Grid Generator
Visually build CSS Grid layouts with drag-and-drop item placement and instant CSS output.
Columns (3)
1fr1fr1frRows (3)
1fr1fr1frGaps
Live Preview
Click and drag on cells to place a new item. Select an item to edit its span.
CSS Output
CSS
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 16px;
}
.item-1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.item-2 {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.item-3 {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
/* Responsive */
@media (max-width: 640px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}HTML
<div class="container"> <div class="item-1">Item 1</div> <div class="item-2">Item 2</div> <div class="item-3">Item 3</div> </div>
All processing is done in your browser. No data is uploaded anywhere.
☕ Love this tool? Support the developer.
100% free — no ads, no limits. Your support keeps every tool free.
Secure payment via Stripe · No account needed
About CSS Grid Generator
OptiPix CSS Grid Generator is an interactive visual editor for building CSS Grid layouts entirely in your browser. Define up to 12 columns and 12 rows with flexible size units — fr, px, auto, or minmax — and control column-gap and row-gap with sliders. Quick column presets like '3 equal', 'Sidebar + main', and '12-column' let you jump straight to common patterns. In Visual Items mode, drag across grid cells to place and span items, then fine-tune each item's grid-column and grid-row start/end values. Switch to Named Areas mode to paint grid-template-areas by clicking and dragging across cells with a typed area name. Container controls expose justify-items, align-items, justify-content, align-content, and grid-auto-flow. Four built-in layout presets — Blog Layout, Gallery Grid, Dashboard, and Magazine — demonstrate real-world grid patterns instantly. The CSS Output panel generates complete, copy-ready CSS including a responsive media query, plus matching HTML structure. Everything runs client-side with no uploads.
How It Works
All grid state — column definitions, row definitions, gaps, items, and area names — is managed in React. The live preview uses matching inline CSS Grid styles so what you see is exactly what the generated code produces. CSS output is derived from the same state, ensuring the code always reflects the preview. Copy buttons write directly to the clipboard.
Use Cases
- •Design blog, dashboard, gallery, and magazine layouts without writing CSS by hand
- •Learn how grid-template-columns, grid-template-rows, and grid-template-areas work visually
- •Prototype complex multi-column layouts and export copy-ready CSS
- •Create named grid areas for semantic, maintainable stylesheets
- •Generate responsive grid CSS with a built-in mobile breakpoint
Frequently Asked Questions
What size units can I use for columns and rows?
How do I place grid items?
What is Named Areas mode?
Does it generate responsive CSS?
Is anything sent to a server?
Related Tools
Flexbox Playground
Visually explore CSS Flexbox — tweak container and item properties with a live preview and copy-ready CSS.
CSS Box Shadow Generator
Create CSS box shadows with visual controls, multiple layers, and Material Design presets.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients with a visual editor and presets gallery.
CSS Border Radius Generator
Generate CSS border-radius with individual corner control and organic blob shapes.