CSS Grid Generator
12 toolsVisually build a CSS grid layout.
Runs in your browser — your files and text stay on your device
Build a CSS grid layout visually and copy the code. Set the number of columns and rows, the gap and how many items to show, and see the layout update live; the output uses equal 1fr tracks, which you can replace with fixed sizes by hand. Grid is the better fit for two-dimensional layouts; use flexbox for a single row or column.
Flexbox PlaygroundGrid GeneratorBox ShadowText ShadowBorder RadiusClip PathGlassmorphismAnimationEasing CurveFilterFluid TypographyUnit Converter
1
2
3
4
5
6
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 12px;
How to use this tool
- 1Set the number of columns, rows, and the gap between cells.
- 2Watch the grid preview update live.
- 3Copy the generated CSS for your grid container.
Frequently asked questions
Why repeat(N, 1fr) instead of listing sizes?
1fr distributes space evenly across all tracks — the simplest starting point. Replace any 1fr with a fixed size (e.g. 200px) or a different fraction for custom column widths.
Is this generated on a server?
No — the preview and CSS are computed entirely in your browser.