Using masonry and having different width items in the grid

  • I’m not able to get this to work. I have a few items in the grid with different widths than the other items (33% and 100%). When I do that, the 100% width items are fine but the rest of the items just align to the left in one 33% width column instead of going into a three column grid. Usually with masonry I can specify different width to different items and the rest of the items fall into the grid.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Darren Cooney

    (@dcooney)

    Hi @wdixon,
    I haven’t tested a Masonry situation with variable width items.
    I’m assuming this needs to make use of the columnWidth parameter?
    https://masonry.desandro.com/options.html

    Thread Starter wdixon

    (@wdixon)

    Ah yes of course. My first item is 100% so you would have to be able to set columnWidth or add an empty .grid-sizer element as the first item in the grid. If you don’t set either of those, it will calculate using the width of the first item.

    Plugin Author Darren Cooney

    (@dcooney)

    Hi @wdixon,
    Sorry for the delayed response on this.

    Is this solved, or do you still require assistance?

    Thread Starter wdixon

    (@wdixon)

    No problem. I haven’t done any more work on this. I would have to write some JS to insert a .grid-sizer element before the others. I don’t see a hook or anything for that. There’s also no way to set the columnWidth. This is probably not something that you’ll see that often so I imagine neither of these things is going to become an option. Would you see any other way besides JS?
    Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Using masonry and having different width items in the grid’ is closed to new replies.