CSS Grid Generator
Design CSS grid layouts visually with columns, rows, gaps, and alignment. Live preview with a real UI demo, exports CSS or Tailwind.
This tool runs entirely in your browser. Your input is never uploaded.
display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto 1fr; gap: 16px; justify-items: stretch; align-items: stretch;grid grid-cols-[1fr_1fr_1fr] grid-rows-[auto_1fr] gap-[16px]Columns (3)
Rows (2)
Visual track editing
Build a grid from column and row tracks of four types: fr for flexible shares, px for fixed sizes, minmax for responsive bounds, and auto for content-sized tracks. Add or remove tracks up to twelve per axis, and tune the column and row gaps independently.
Live preview with real UI
The preview is a real grid container, not a diagram. Four presets — card grid, holy grail, dashboard, and gallery — each render genuine UI elements (header, nav, sidebar, metrics, image tiles) so you can see how your tracks behave with plausible content as you edit. Alignment is adjustable through justify-items and align-items.
Export
- CSS: a complete declaration with
display: grid, both track templates, the gap shorthand (merged when both gaps match), and alignment. - Tailwind: arbitrary-value utilities such as
grid-cols-[1fr_200px]plus gap and alignment classes, skipping defaults.
Your layout is saved in this browser and restored on your next visit. All processing happens locally.
Related tools
Border Radius Generator
Preview and fine-tune CSS border-radius for one or four corners, then copy CSS or Tailwind classes.
Open ToolBox Shadow Generator
Design layered CSS box-shadows with a live preview, presets, and CSS or Tailwind export.
Open ToolGradient Generator
Design CSS gradients with draggable color stops and export CSS, Tailwind, and config.
Open Tool