2

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.

The Problem

Francisc
  • 77,430
  • 63
  • 180
  • 276
  • 1
    I'm struggling with the same problem and found the plugin provided in this answer very helpful: http://stackoverflow.com/a/13050801/1063730 HShuld suit your vertical layout but if you, like me, want to achieve a horizontal layout at least it might provide some inspiration :) – nuala Nov 20 '12 at 14:07
  • Thanks, yoshi. [extra chars] – Francisc Nov 20 '12 at 17:38

2 Answers2

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.

Александр Фишер
  • 1,447
  • 12
  • 18
0

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.

p-zilla
  • 45
  • 8
  • 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. – Francisc Jun 10 '12 at 21:55