Masonry aka waterfall aka collapse aka pack aka Pinterest-style layout — display grid-lanes cheatsheet for my future self

Do you remember the little drama with Apple and Google proposing two contradicting ideas about the native CSS way for masonry layout implementation? It is all over, and what we got is a beautiful compromise between the two in a the form of display: grid-lanes. This is super exciting as it has been a frequently requested feature for many years, and the number of downloads of JS libraries like Masonry by David DeSandro just proves this point. I celebrate every moment when I can bin a chunky third party script and replace it with a few lines of CSS.

This is just a quick copy/pasta 🍝 cheatsheet post with common use cases for the new layout mode. Be aware of the browser support and embrace the progressive enhancement as it works well with it.

Looks like your browser doesn’t support display: grid-lanes yet. If you want to interact with the demos included in this post, please use one of the supported engines (Safari 26.4 has a good support). Think twice before you call Safari the next IE next time 😜

Looks like your browser doesn’t support CSS random() function used across the demos included in this post. Please use one of the supported engines (Safari 26.4 has a good support).

Columns and rows

The new display mode supports columns and rows. Perfecto! We use good old grid-template-columns and grid-template-rows to define them. Like so:

.grid {
  display: grid-lanes;
  grid-template-columns: repeat(3, 1fr);

  div {
    block-size: random(2lh, 10lh);
  }
}

See the Pen Untitled by Pawel Grzybek (@pawelgrzybek) on CodePen.

.grid {
  display: grid-lanes;
  grid-template-rows: repeat(3, 1fr);

  div {
    inline-size: random(2lh, 10lh);
  }
}

See the Pen 2026.07-04 - columns by Pawel Grzybek (@pawelgrzybek) on CodePen.

Variable grid items size

If you want to resize one of the items, you can do so by using all you already know. Here is an example.

.grid {
  display: grid-lanes;
  grid-template-columns: repeat(3, 1fr);

  div {
    block-size: random(2lh, 10lh);

    &:first-of-type {
      grid-column: span 2;
    }
  }
}

See the Pen 2026.07-04 - columns by Pawel Grzybek (@pawelgrzybek) on CodePen.

Tolerance

Browser tasked to draw masonry layout, iterates over the elements, checks which column/row has the most empty room and places the next item there. In some circumstances, this algorithm produces an unintuitive results. Look at this example.

See the Pen 2026.07-04 - columns by Pawel Grzybek (@pawelgrzybek) on CodePen.

Technically correct, right, but visually a little confusing and for assistive tech users messed up a little. Here is where the flow-tolerance comes in. Now, the calculation to determine the next available column/row is adjusted by the value of this property. The default value of flow-tolerance is 1em. Now look at this. Better, right?

.grid {
  display: grid-lanes;
  grid-template-columns: repeat(2, 1fr);
  flow-tolerance: 1lh;
}

See the Pen 2026.07-04 - tolerance default by Pawel Grzybek (@pawelgrzybek) on CodePen.

The story of grid-lanes and accessibility is a bit more complicated, but there is no point getting into it here, because Manuel Matuzović already published “Your Grid Lanes will likely fail WCAG 2.4.3” and “Progressively enhancing Grid Lanes”. Good posts, give them a read!

References

• “Learn CSS Grid Lanes” by Brandon Steward presented at WWDC 2026
• “The Field Guide to Grid Lanes” by WebKit team

Leave a comment