Unwanted White Space in Repeating Group

Is there any way to collapse this white space and have the items be next to each other, and fit to width?

When I set the row settings to just 1, it’s fine, but row settings at 2 will kabosh it

Hi there, @drixxon… I could be off base here because I have never used it, but isn’t what you described the purpose of the masonry layout for repeating groups? Apologies if I have missed the mark because, again, I have never used the feature, but that’s what I thought it was for, so I didn’t think it could hurt to mention it.

Best…
Mike

Another option is to simply set the Scroll direction to Wrapped horizontally

You’ll have to deselect Set fixed number of rows.

1 Like

wrapping horizontally like in your settings produces this:


You’re spot on except, masonry only works when you have a fixed number of columns, and a dynamic number of rows.

So like the instagram explore page is a pretty perfect example of a masonry grid.

Bubble doesn’t give you the masonry option at all when I have a fixed number of rows, (1), but a dynamic number of columns!

1 Like

If Fit width to content is set on the RG or a containing element (via the Layout tab), then that’s what you’ll get. The RG must be allowed to “expand”.

Here’s an example from my library…

wrapping-tags

Try setting ‘Min width of column’ to 0px. Right now what it’s doing is eery single element is stretching 100% wide and being considered it’s own column width, so it’s not adding any more columns. This, coupled with your already selected ‘Scroll direction: Wrapped horizontally’, and not having a fixed number of rows or columns (and no stretching of either) should get you what you’re expecting.