How to avoid gaps using Isotope with Masonry layout [closed]

Question

How can I fix the gap caused by the element sliding to the next row like in the image below?

I'm using Isotope with the masonry layout mode.

Thank you.

Chino

I'm struggling with the same problem and found the plugin provided in this answer very helpful: https://mcmap.net/q/1020803/-how-to-get-isotope-to-avoid-gaps-with-variable-size-tiles-closed HShuld suit your vertical layout but if you, like me, want to achieve a horizontal layout at least it might provide some inspiration :) – Shipp

Thanks, yoshi. [extra chars] – Chino

Answer 1

I have a similar problem and I'm going to "fix" that by precalculating the order of the elements that way, that there will be no spaces and the boxes will always fit in the grid layout. AFAIK there is no solution by this isotope jQuery plugin for that.

Turanian

Answer 2

At a guess I'd say -

Because the next item in the order is that big block underneath.

Or the following item is the other smaller block bottom left. Even if that was moved up to occupy the white space there would still be a white gap left where it came from.

Maybe masonry favours left edge over right or something. Literally only started using it today so I'm no expert. Found this question while searching for an answer of my own.

Staford

It's the big block. But that's not the issue. I know where the problem is coming from, I don't know how to fix it. – Chino