Build CSS grid layouts with columns, rows, and gaps.
Tip: use samples, upload, copy, download, and send-to actions inside the workspace where available.
CSS Grid Generator is a free, browser-based tool that helps you produce ready-to-use output in seconds. Build CSS grid layouts with columns, rows, and gaps. It's built for speed and privacy: Everything runs locally in your browser — your data is never uploaded to a server. No sign-up, no installs, and no daily limits.
Generate a sample or helper artifact, then copy it into the workflow that needs it.
Review the preview, copy or download the result, and keep everything local in your browser.
CSS Box Shadow Generator: Design CSS box-shadows visually and copy the code.
Open tool
grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, 1fr);No items placed, so the preview shows 6 auto-placed cells. Place an item to control its column and row explicitly.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
}<div class="grid"> <div>Cell 1</div> <div>Cell 2</div> <div>Cell 3</div> <div>Cell 4</div> <div>Cell 5</div> <div>Cell 6</div> </div>
grid grid-cols-3 grid-rows-2 gap-4Bracketed arbitrary values use underscores for spaces. They must appear literally in your source — Tailwind scans files as text and cannot see a class name assembled at runtime.
Lines are numbered, not tracks. A three-column grid has four column lines. grid-column: 1 / 3 spans two columns, not three — which is why the span syntax above is usually clearer.
1fr is not auto. An fr track distributes leftover space, but its minimum is auto — so a long unbreakable word can push a 1fr column wider than its share. Use minmax(0, 1fr) when you need the track to actually shrink.
Named areas document intent. They cost nothing at runtime and make a responsive redefinition trivial — you restate the area strings in a media query and every item moves, with no changes to the item rules at all.
Grid vs flexbox. Grid places children into a layout the parent defines in both axes; flexbox distributes children along one axis and lets their own sizes drive the result. Rows of unequal card counts want flexbox; page structure wants grid.