CSS Grid Generator
Build a CSS Grid layout with a visual interface — add columns, rows, tune gaps, choose track sizing units (fr, px, %, auto, min-content, max-content). Copy production-ready CSS.
Columns (3)
Rows (2)
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; gap: 12px; }
About CSS Grid Generator
CSS Grid is the layout engine that finally made two-dimensional layouts practical on the web — dashboards, image galleries, complex page templates, and asymmetric card grids all become natural expressions instead of nested-flexbox hacks. This CSS Grid Generator gives you a visual builder for the container-level properties: number of columns and rows, per-track sizing (fr, px, %, auto, min-content, max-content), gap tuning, and item-alignment options. Every change updates the live preview, and the generated CSS is production-ready with no runtime dependencies.
Useful for developers new to Grid who want to see how fr units distribute space, designers translating a wireframe into layout code, and anyone comparing Grid vs Flexbox for a specific layout problem. The unit picker exposes the full CSS Grid track-sizing spec (including min-content and max-content, which few tutorials cover) so you can experiment with tracks that hug their content. The generated CSS is copy-paste ready and works in every browser released since 2017 — no fallbacks required unless you specifically need Internet Explorer 11.
How to Use
Add columns and rows using the + buttons. Remove any track with the × next to it.
For each track, pick a size unit: fr (fractional, distributes remaining space), px (fixed pixels), % (percentage of container), auto (sizes to content), min-content, or max-content.
Set gap values — column gap and row gap independently, or lock them together for uniform spacing.
Optional: adjust justify-items (horizontal alignment of items in cells) and align-items (vertical alignment).
The live preview updates instantly. Click Copy CSS to grab the generated code.
Frequently Asked Questions
What is the difference between fr, px, %, and auto?
'fr' (fractional unit) distributes remaining space after fixed-size tracks are allocated — 1fr 2fr means the second column takes twice as much of the remaining space as the first. 'px' is fixed pixels. '%' is a percentage of the container width/height. 'auto' sizes the track to fit its content. Mix them: '200px 1fr auto' gives a fixed sidebar, a flexible content area, and an auto-sized action column.
When should I use grid vs flexbox?
Grid is best for two-dimensional layouts (both rows AND columns matter simultaneously — dashboards, image galleries, page templates). Flexbox is best for one-dimensional layouts (a row of nav items, a column of form fields). If your layout has a specific 2D grid structure, use Grid. If it flows in a single direction, use Flexbox.
What does min-content and max-content do?
'min-content' sizes the track to fit its smallest inline content — for text, the longest single word without breaking. 'max-content' sizes to fit content on a single line without wrapping. Useful for tracks that should hug their content: 'grid-template-columns: max-content 1fr' gives a label-sized first column and a flexible second.
How do I make cells span multiple rows or columns?
This generator produces the parent container CSS. To span cells, add 'grid-column: span 2' or 'grid-row: 1 / 3' to individual child elements in your own CSS. Advanced grid features like grid-template-areas and named lines are best hand-written after establishing the base grid with this tool.
Is CSS Grid supported in all browsers?
Yes — CSS Grid has universal support in every browser released since 2017. All modern versions of Chrome, Firefox, Safari, Edge, and every mobile browser support it. You can use it without fallbacks unless you specifically need to support Internet Explorer 11 (which has a partial, outdated implementation).