CSS Grid Generator
Visually configure CSS Grid rows, columns, gaps, and item placement, then copy clean, ready-to-use CSS and matching HTML.
Any valid track value works — 1fr, 200px, auto, or minmax(100px, 1fr).
Your Data Never Leaves Your Device
Every tool runs entirely in your browser. Nothing you type is uploaded, stored, or logged on our servers.
The CSS Grid Generator turns a grid layout into something you can see and adjust instead of guessing at in a stylesheet. Add or remove column and row tracks, type any valid track value — 1fr, 200px, auto, minmax(100px, 1fr) — and set the row and column gaps in px, rem, em, or percent.
Drag across the live preview to place an item across any block of cells, then fine-tune its exact column, row, and span values. The tool writes out the container rule with your justify-items, align-items, justify-content, align-content, and grid-auto-flow settings, one placement rule per item, and a matching HTML snippet — collapsing repeated tracks into repeat() the way you would write them by hand.
Everything runs client-side in your browser, so nothing you build is ever uploaded. If your layout is a single row or column of content, the Flexbox Generator is usually the better fit.
FAQ
It lets you build a CSS Grid layout visually — set the column and row tracks, gaps, and alignment, drag across the preview to place items, and copy the generated CSS and matching HTML straight into your project.
Drag across the cells you want the item to cover in the preview, and it appears in the items list below. You can fine-tune the exact column, row, and span values with the number inputs, or remove an item you no longer need.
Any valid CSS Grid track value, including fr units (1fr, 2fr), fixed lengths (200px, 10rem), intrinsic keywords (auto, min-content, max-content), and functions such as minmax(100px, 1fr) or fit-content(300px).
When every column or row track has the same value, the output collapses to repeat(n, value) — the shorter form most developers write by hand. Mixed track values are listed out individually instead.
justify-items positions each item inside its own grid cell along the inline (horizontal) axis, while justify-content positions the whole grid inside the container when the tracks are narrower than the available space. The align-* properties do the same for the block (vertical) axis.
Yes. Those numbers are grid line numbers, not column numbers, so an item from line 1 to line 3 covers the two columns between them. When an item covers a single track, the tool emits the shorter grid-column: 1 form.
No. The layout, preview, and generated code are all produced in your browser, so nothing you configure ever leaves your device.
Grid is best for two-dimensional layouts where you control rows and columns together, such as page shells and dashboards. Flexbox is better for one-dimensional rows or columns of content — the Flexbox Generator covers that case.