Troubleshooting the Desandro Masonry

  • I’m using the Desandro masonry JS package for a masonry of blog posts on the homepage of a site. I’m seeing gaps where there shouldn’t be gaps in my masonry. It’s a straightforward three-column grid of identically-sized post thumbnails, but sometimes the masonry leaves a gap of two posts, filling in the next post in the rightmost spot instead of the leftmost spot and leaving the rest unfilled. Inspecting reveals that every third post thumbnail is marked ‘last’ as it should be, representing that it is the last on the line before it wraps to the next line, but the items just aren’t populating where they’re supposed to.

    Right now I have 12 posts, and the layout is looking like this, with the Xs representing posts where they should be and the Os representing gaps:

    XXX
    XXX
    OOX
    XXX
    OOX
    X

    When I add a 13th post, the formatting shifts to the following:

    XXX
    OOX
    XXX
    OOX
    XXX
    OOX
    X

    I just updated the library to the most recent version (v4.2.2) but am still having this issue. I’ve been staring at it for a while and I can’t figure out the pattern. Does anyone have any insight for troubleshooting this masonry library or see a pattern here? Or have ideas of other things that might be messing with a perfectly good masonry plugin?

    Thanks so much for any insight or help!

    • This topic was modified 2 years, 4 months ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter ellenpop

    (@ellenpop)

    An interesting thing to note is that the masonry behaves as it should on specific category pages (see here, where the masonry has looked normal with every number of posts in the Reviews category so far). It looks like it’s only placing things in wonky patterns on the homepage.

    Thread Starter ellenpop

    (@ellenpop)

    I did a lot more testing, and it looks like the skipped spaces are entirely random, largely unrelated to the number of posts or which posts are on the page.

    It acts the same way on the home page and in a category. I looked through all the JS/CSS/PHP for handling the masonry in the home page and in the categories, and it’s almost all identical. I then put all my posts in the uncategorized category and they space weirdly there too. It’s not specific posts, as I’ve tried taking each of them out of the category and back in and there were no consistent patterns to the shape of the spacing. Often, the post immediately before it would fill in its lone space on the line.

    It also isn’t to do with post number specifically, since I tested this with nine posts in Uncategorized – the same as Reviews, where everything looks fine – and the spacing was wrong then too. However, when I tested with a slightly different array of nine posts in Uncategorized, not the same as the previous or as in Reviews, the spacing was fine again.

    In one case, I had 20 posts with gaps, took out two posts, had a perfect grid of 18. Added one, gaps again. Substracted one, 18 posts again, should be the same grid, has gaps.

    Adding a “load more” cutoff after 15 posts in a category of 21 posts with gaps made it behave perfectly as a 7×3 grid. Adding a “load more” cutoff at 9, on the other hand, created gaps again starting in the third row.

    Is there any known reason for this kind of sporadic masonry behavior?

    Does anyone have any fix or workaround ideas or alternatives you like?

    Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Troubleshooting the Desandro Masonry’ is closed to new replies.