Loading Techie Utils…

CSS Grid Generator

Build a grid template and see the tracks it makes. Free, and runs entirely in your browser — nothing you enter is uploaded, stored or sent to a server.

About CSS Grid Playground

A grid is defined by its tracks, and a track list is the one part of CSS that is genuinely hard to read: repeat(auto-fit, minmax(180px, 1fr)) is four ideas in one expression. Type it here and see the columns it produces, at the gaps and item counts you are actually going to use.

1fr is not 33.33%, and the difference is the reason grids behave unexpectedly. A fraction is a share of the *leftover* space, taken after fixed tracks and gaps have been subtracted, so 1fr 1fr 1fr with a 20px gap still fits — three equal percentages plus gaps do not. It is also why 1fr refuses to shrink below its content's minimum size unless you write minmax(0, 1fr), which is the fix for the overflowing grid item everybody meets eventually.

auto-fit and auto-fill differ in exactly one respect: what happens to the tracks nothing landed in. auto-fill keeps them, so the items stay at their natural size with empty space to the right; auto-fit collapses them, so the items stretch to fill the row. With enough items to fill every track the two are indistinguishable, which is why the distinction is so hard to remember.

Where it helps

  • Track lists are typed as CSS rather than assembled from controls, so what you learn here transfers directly to a stylesheet.
  • Says in words what the track list produces, including the auto-fit and auto-fill cases that look identical until they do not.
  • Row and column gaps are set separately, which is how a real grid is usually tuned.
  • Shows a spanning item against ordinary ones, where the interesting parts of grid behaviour actually appear.
  • Warns about dense packing reordering the layout away from the DOM order.
  • Runs entirely in your browser.

Limits

  • Named template areas are not offered. They are the clearest way to write a page-level layout, and they need a different editor than a single track list.
  • Line-based placement — grid-column: 2 / 5 — is reduced to a span on the first item; arbitrary per-item placement is not modelled.
  • Subgrid is out of scope, so a nested grid here cannot inherit its parent's tracks the way a real one can.
  • The items are empty boxes, so min-content, max-content and auto tracks have nothing to size themselves against.
  • It validates the track list loosely: something CSS rejects may be accepted here and simply render as one column.

Frequently asked questions

What is the difference between auto-fit and auto-fill?

Only what happens to empty tracks. auto-fill keeps them, so four items in a six-track row stay their natural width with a gap on the right; auto-fit collapses them, so the four items stretch across the whole row. When the items outnumber the tracks the two behave identically.

Why does my grid item overflow its column?

Because 1fr means minmax(auto, 1fr), and auto refuses to go below the content's minimum size — a long URL, a wide table, an image with no max-width. Writing minmax(0, 1fr) removes that floor and lets the track shrink, which is the standard fix.

Should I use gap or margins?

gap. It applies only between tracks, so there is no edge margin to cancel and no last-child rule to write, and grid subtracts it before sizing the fractions — meaning the columns still add up.

Is grid slower than flexbox?

Not meaningfully. Both are laid out by the same engine, and layout cost is driven by how many elements are involved and how often they change, not by which display value produced them. Choose on how the layout is shaped, not on performance.

Related tools

More Web Development tools