CSS Grid Generator
Visual CSS Grid layout builder with live preview. Define rows, columns, gaps, grid areas, and item placement. Generate production-ready CSS Grid code. Everything runs in your browser.
Define named areas using the visual ASCII syntax. Each quoted line is a row. Use a dot (.) for empty cells.
Layout Presets
How to Use CSS Grid Layout
CSS Grid Layout is the most powerful layout system available in CSS. It is a two-dimensional system, meaning it can handle both columns and rows simultaneously. You define a grid container with display: grid, then set up the track sizes with grid-template-columns and grid-template-rows. Child elements become grid items that can be placed and sized across the grid.
Defining Tracks
Grid tracks are defined using grid-template-columns and grid-template-rows. You can use fixed units (px), flexible units (fr), percentages (%), auto, and the minmax() function. The fr unit distributes available space proportionally — 1fr 2fr gives the second column twice the space of the first.
Placing Items
Grid items are placed using grid-column and grid-row properties. You specify start and end lines: grid-column: 1 / 3 spans from line 1 to line 3 (two columns). You can also use span: grid-column: span 2 makes the item span two columns from its auto-placed position.
Named Grid Areas
The grid-template-areas property lets you name regions of your grid with an ASCII-art-like syntax. Assign names with grid-area on child elements, then define the layout visually in the container. This makes complex layouts extremely readable and easy to modify for responsive designs.
Alignment
CSS Grid provides full alignment control. justify-items and align-items control how items are positioned within their grid cells. justify-content and align-content control how the entire grid is positioned within the container when the grid is smaller than the container.
Features
- Visual grid builder: add/remove columns and rows with flexible track sizing (fr, px, %, auto, minmax)
- Adjustable row-gap and column-gap with linked sliders
- Grid item placement: set grid-column and grid-row start/end lines
- Named grid areas support with visual ASCII template editor
- Full alignment controls: justify-items, align-items, justify-content, align-content
- 5 built-in layout presets: Holy Grail, Dashboard, Photo Gallery, Responsive Cards, Magazine
- Live preview updates in real time as you adjust controls
- Syntax-highlighted CSS output with one-click copy
- Keyboard shortcuts: Ctrl+Enter to generate, Ctrl+Shift+C to copy, Ctrl+L to reset
- 100% client-side — nothing is sent to any server
CSS Grid vs Flexbox
Use CSS Grid for two-dimensional layouts (page structure, dashboards, galleries) and Flexbox for one-dimensional component layouts (navbars, button groups, card content). They complement each other perfectly — it is common to use Grid for the overall page layout and Flexbox within individual grid items.
Browser Support
CSS Grid Layout is supported in all modern browsers: Chrome 57+, Firefox 52+, Safari 10.1+, and Edge 16+. The gap property (shorthand for row-gap and column-gap) is supported in Chrome 66+, Firefox 61+, Safari 12+, and Edge 16+. No vendor prefixes are needed.