cssgridgen

CSS Masonry Generator

Pinterest-style ragged columns, with a fallback that works in every browser now.

Open in
1
2
3
4
5
6
7
8
9
10

Your browser does not support display: grid-lanes yet, so this preview is drawn with the multi-column fallback. The exported CSS uses grid-lanes where available and falls back to what you see here.

Experimental. display: grid-lanes is CSS Grid Level 3 and is not broadly shipped yet — Safari led, Chrome and Firefox are behind flags. The export is written fallback-first inside @supports, so it is safe to ship today and upgrades itself as browsers land it.

/* Fallback first: CSS multi-column already packs items into
   columns, which is close enough while grid-lanes ships. */
.masonry {
  columns: 160px;
  gap: 12px;
}

.masonry > * {
  /* Stops a card being split across two columns. */
  break-inside: avoid;
  margin-bottom: 12px;
}

/* The real thing. display: grid-lanes keeps one axis as strict
   tracks and packs the other, which is what masonry always meant. */
@supports (display: grid-lanes) {
  .masonry {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    columns: initial;
  }

  .masonry > * {
    margin-bottom: 0;
  }

  /* Items can still be placed explicitly inside a lanes layout. */
  .masonry > .featured {
    grid-column: span 2;
  }

}
Free tool

Fallback first, native syntax behind @supports

Masonry is the layout CSS could not do for a decade, so everyone reached for a JavaScript library. Grid Level 3 adds it natively — but support is still thin, so this generator writes the working fallback first and layers the native rules on top.

How to use it

  1. Set the columns and gap

    How many lanes the items flow into, and the space between them. Three is the usual starting point for a card wall.

  2. Choose a fallback

    Multi-column gives the closest masonry look everywhere today. Plain grid keeps source order but loses the ragged edge. None emits the native syntax only.

  3. Check the support note

    The tool reports whether your current browser supports the native syntax, so you know which branch of the output you are actually seeing.

  4. Copy the CSS

    The fallback is emitted first, with the native rules inside an @supports block, so the layout upgrades automatically as support lands.

The syntax actually changed

If you have read about masonry before, you probably saw grid-template-rows: masonry. That proposal lost. The specification settled on a separate display type, display: grid-lanes, because overloading grid's track syntax made too many other properties ambiguous. Anything you find written before 2026 is likely to show the old spelling.

Multi-column is a real answer

columns: 3 with break-inside: avoid on the children gets you a masonry wall in every browser, today, in two declarations. The trade is reading order: multi-column fills each column top to bottom, so the second item lands below the first rather than beside it. For a photo grid nobody notices. For a feed where order carries meaning, it matters, and you should use the grid fallback instead.

Why images make it worse

Every JavaScript masonry library measures elements after they paint. With lazy-loaded images that means the measurement happens before the image has a height, then again after — a visible reflow on every load. Setting width and height attributes on your images fixes it for the library and is worth doing regardless; the CSS approaches never had the problem.

Related

For aligning cards within a row rather than staggering them, you want the subgrid generator. For placeholder images while you build the wall, the placeholder image generator.

Frequently asked questions

What is CSS masonry layout?
A layout where items are placed into columns of equal width but flow into whatever column has the most room, so rows are ragged rather than aligned — the Pinterest arrangement. CSS Grid Level 3 adds it natively so you no longer need a JavaScript library.
What is the current CSS masonry syntax?
The specification settled on display: grid-lanes after a long debate between a masonry value on grid-template-rows and a separate display type. Support is still limited, so this generator emits a working fallback first and puts the native version inside an @supports block.
Can I do masonry with CSS columns instead?
Yes, and it is the fallback this tool generates. columns: 3; column-gap: 1rem with break-inside: avoid on the children gives you a masonry look in every browser today. The catch is reading order: multi-column fills top-to-bottom per column, so item 2 sits below item 1 rather than beside it.
Why does CSS Grid not do masonry already?
Grid places items into a two-dimensional matrix of tracks, and every item in a row shares that row’s height. Masonry deliberately breaks that: an item’s position depends on the height of the items above it. It needed new layout machinery, which is why it took years.
Should I ship masonry to production yet?
Ship the multi-column or grid fallback as your baseline and layer the native syntax on top with @supports. That way you get the correct layout everywhere today and the better one automatically as support lands.
What about JavaScript masonry libraries?
They still work, but they measure elements after paint, which means a layout shift on load, a resize listener, and a bad interaction with lazy-loaded images. If a CSS fallback gets you close enough, it is worth the trade.

Related tools

Every generator here writes CSS you can paste straight into a project.