Overview
Lays out a CSS Grid visually — columns, rows, gaps, and item alignment — and emits the exact .grid-layout rule with repeat(N, minmax(0, 1fr)) tracks, ready to drop into a stylesheet.
How It Works
Set Columns and Rows (1–6 each) and Items with sliders; set column and row gaps (0–64px) as numbers; pick align-items and justify-items behaviour (stretch, start, center, end). The live canvas shows numbered items auto-placed in the grid, Copy CSS takes the generated rule, and your layout persists in the browser under a versioned localStorage key.
Step-by-Step Usage Guide
- Drag Columns and Rows to the track count you need.
- Set Items to how many children the grid will hold.
- Tune the gaps and choose the alignment behaviour for the children.
- Copy the CSS and paste it over your container's class.
Technical Specifications & Standards
The generator emits tracks as repeat(N, minmax(0, 1fr)) rather than repeat(N, 1fr) — the minmax(0, 1fr) form stops grid children with long content from blowing out their tracks, which is the most common beginner grid bug. Items are auto-placed sequentially, and the alignment choices land on the container as align-items and justify-items, which every child inherits.
Targeted Use Cases
- Scaffolding a dashboard or card grid before content exists.
- Comparing gap sizes and alignment options visually instead of guess-editing CSS.
- Generating the skeleton for a photo gallery or product grid.
- Teaching grid fundamentals with an immediate visual-to-code mapping.
Notes & Gotchas
- Tracks are always repeat(N, minmax(0, 1fr)) — equal-width and content-safe. Responsive behaviour (auto-fit, media queries) is out of scope; add it after copying.
- Items auto-place in order; there is no click-to-span or grid-area placement. Extend the copied CSS with grid-column: span 2 yourself where you need spanning cells.
- The canvas preview and the exported CSS differ slightly in row sizing (a 48px minimum in the preview, minmax(0, 1fr) in the output) — trust the exported rule on your page.
- Six columns and six rows is the designed ceiling; larger layouts are usually a sign to nest grids instead.
Frequently Asked Questions
Why minmax(0, 1fr) instead of plain 1fr?
A bare 1fr track is really minmax(auto, 1fr), so one wide child can stretch the whole column. minmax(0, 1fr) forces equal, content-respecting tracks.
Can I span cells or place items manually?
No. Items auto-place sequentially; extend the copied CSS with grid-column or grid-row when you need spans.
Does it output Tailwind or inline styles?
No. The single output is a .grid-layout CSS class.
Where are my settings kept?
In your browser's localStorage under a versioned key — nothing is uploaded.