Fun with grid-lanes - CSSDay 2026 - Masonry flow tolerance

Tolerance: 16px

This brings us to something quite important, called flow-tolerance. Why do we have this somewhat chaotic way of placing items? Going back and forth between lanes? Masonry is trying to solve two conflicting goals at once: 1. Produce a result that's visually balanced. Where no one lane is much much longer than the others, and where we don't have big gaps. So, attempting to fill lanes that aren't yet filled. 2. Preserve the DOM order as much as possible. So, attempting to place items predictably, from left to right for example. These are not always compatible. If you went strictly one lane after the other, you might end up with a very unbalanced layout, with one very long lane for example. On the other hand, if you always picked exactly the shortest lane, you might end up with a very chaotic layout, with items placed in a seemingly random order. That's where flow-tolerance comes in. And where you have control. With a flow-tolerance value of 0, you get the most strict placement. The overall layout is balanced because you _always_ pick the shortest lane. But you also get the most DOM order disruption. With a flow-tolerance value of infinite, you get no disruption at all you always pick the next lane, because they're always considered tied. But you also get the most visually unbalanced results, with long lanes. The 1em value is a default value that tries to strike a balance between the two. Because this way, very tiny differences in height are ignored, which helps keep the flow a little more predictable. You can set the value of the `flow-tolerance` property to whatever works best for your content and design.