CSS Grid Playground

Build a grid with sliders and selects, span cells by clicking them, copy the CSS or Tailwind.

Processed locally — nothing is uploaded

columns · 3items · 6column-gap (px) · 12row-gap (px) · 12grid-auto-flowjustify-itemsalign-items

Click an item to widen it — grid-column: span 2, then 3, 4, back to 1. With dense flow, later items fill the holes that leaves.

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
  justify-items: stretch;
  align-items: stretch;
  gap: 12px;
}

About CSS Grid Playground

Spanning is where grids earn their keep and where hand-written CSS goes wrong. Click a cell to widen it across columns and the generated rule updates; switch auto-flow to dense and later items backfill the gaps a span leaves, which is the behaviour a photo wall or a dashboard actually wants. Gaps are set separately for rows and columns because they are rarely equal in a real layout.

Set the column count, the row and column gaps, the auto-flow and the item placement with the controls, and the preview lays out a real CSS grid with those values. Each cell is a button: clicking it widens the item across two, three or four columns and then back to one, and the generated stylesheet adds a grid-column: span rule for every item that is wider than a single track. The Tailwind pane shows the equivalent utility classes for the container.

The interesting control is grid-auto-flow. With the default row flow, an item that spans two columns can leave a hole at the end of the previous row, because the next item will not fit there and moves down. Switch to dense and the browser fills that hole with the next item that does fit, reordering the visual layout to close gaps. It is the behaviour a photo gallery or a dashboard of mixed-size cards wants, and the one that surprises people when reading order and visual order stop matching.

Column and row gaps get their own sliders — cards in a row usually sit closer to each other than to the row above them. When the two values match, the generated CSS collapses them into the single-value gap shorthand; when they differ it writes the two-value form, and the Tailwind output uses gap-x and gap-y accordingly.

Columns are written as repeat(n, minmax(0, 1fr)) rather than plain 1fr tracks. The minmax matters: a bare 1fr track has a minimum size of auto, which means a long word or a wide image inside a cell can push the track wider than its share and break the equal-column promise. With a zero minimum the columns stay equal and the content inside them is what has to yield.

Learn how this works

A Practical Guide to Everyday Developer Encoding & FormattingHow and when to use Base64, JSON formatting, hashing, JWTs, regex and cron — with free in-browser tools for each task.11 min read

Frequently asked questions

Why is there a gap in my grid after a spanning item?

Because with row flow the browser places items in order and an item that does not fit in the space left on a row starts a new one, leaving the remainder empty. Set grid-auto-flow to dense to let later, smaller items fill those spaces — with the caveat that their visual order will no longer match their source order.

How do I make a column wider than the others?

Give it a different track size in grid-template-columns, for example 2fr 1fr 1fr. This playground keeps every column equal and lets items span instead, which covers most card and gallery layouts; for a sidebar-and-content page, edit the generated template by hand.

What does minmax(0, 1fr) do that 1fr does not?

It stops content from stretching a track. A 1fr track's minimum is the size of its widest unbreakable content, so an image or a long URL can make one column wider than the rest. minmax(0, 1fr) sets the minimum to zero, and the content has to wrap or overflow inside an equal column.

Grid or flexbox?

Grid when the layout is two-dimensional — rows and columns that need to line up with each other. Flexbox when items flow in one direction and each one's size is its own business. A card gallery is grid; a toolbar is flexbox; a page is usually grid containing flexboxes.

Is anything sent to a server?

No. Everything runs locally in your browser using standard web APIs — your text, files and inputs are never uploaded to a server, so the tool works even offline once the page has loaded.

Is it free?

Completely. There is no sign-up, no account, no watermark and no usage limit. The tool is supported by unobtrusive ads, not by selling or processing your data.

Pro Tips

→Design the span pattern first, then turn on dense flow and check whether the reordering it causes is acceptable — for a gallery it usually is, for a list of steps it never is.
→Keep spans to two or three columns; a span of four in a four-column grid is a new row wearing a disguise.
→For responsive grids, take the generated rule and wrap alternatives in media queries that change only the column count — the spans still apply.
→Use a larger row gap than column gap when cards have their own borders; the rows read as groups and the layout breathes.
→Share the link rather than a screenshot when reviewing a layout: the reviewer can click cells and try alternatives.

Common Use Cases

•Laying out a gallery where featured images take two columns and the rest fill in around them.
•Prototyping a dashboard of widgets with a few double-width cards before building the components.
•Learning grid by changing one property at a time and reading the CSS it generates.
•Producing Tailwind grid classes for a product listing without consulting the utility reference.
•Explaining to a colleague why their layout has holes, by reproducing it and toggling dense flow.

How It Compares

CSS Grid Generator by Sarah Drasner and Grid Layoutit both let you draw areas and named lines, which this playground deliberately does not — it covers the equal-column, spanning-cards case that is most of real usage, and adds Tailwind output and shareable state. For named grid areas and asymmetric templates, those tools remain the better choice; for a card layout you can hand to someone as a link, this is faster.