CSS Grid Generator
Build CSS Grid layouts visually. Define columns and rows with fr, px, %, auto, or minmax. Place items with grid-column and grid-row. Six presets.
Click an item to edit. Hover to remove.
display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 12px;
grid_viewGrid Container
styleLayout Presets
What is the CSS Grid Generator?
A CSS Grid generator builds the grid-template-columns, grid-template-rows, and per-item placement rules for two-dimensional layouts. Grid is what you reach for when Flexbox isn't enough: dashboards, page-level layouts (Holy Grail), magazine-style galleries. The visual editor saves you from doing the math on grid-column: 2 / 4 by hand.
How to use the CSS Grid Generator
- 1
Define columns and rows
Add tracks with the + button. Pick a unit per track: fr for proportional, px for fixed, % for percentage, auto for content-sized, minmax for responsive minimums.
- 2
Set the gap
One gap value for both axes, or toggle Separate to set column-gap and row-gap independently.
- 3
Place items precisely
Click any item in the preview to select it. Set its grid-column and grid-row start/end (1-based, like CSS itself). Set them to 0 for auto-placement.
- 4
Or load a preset
Six presets cover common patterns: 2 Columns, 3 Columns, Sidebar, Holy Grail, Dashboard, Gallery. Toggle Advanced mode if you'd rather type raw values like repeat(3, 1fr).
Frequently Asked Questions
What CSS Grid properties can I set?
Container: grid-template-columns, grid-template-rows, gap (or column-gap and row-gap independently). Items: grid-column, grid-row (start and end lines), justify-self, align-self. The output uses the modern shorthand syntax (no IE-era prefixes).
What units are supported for columns and rows?
Five: fr (proportional fraction of available space), px (fixed pixels), % (percentage of container), auto (sized to content), and minmax (a range, generated as minmax(0, Nfr)). Advanced mode lets you type any valid grid-template value, including repeat(3, 1fr) or subgrid.
Are there preset layouts?
Six: 2 Columns, 3 Columns, Sidebar (fixed-width sidebar plus fluid main), Holy Grail (header + 3-column main + footer), Dashboard (mixed-span widgets), Gallery (uniform 3×2). Click any to load tracks, gap, and item positions; tweak from there.