We just added masonry layout for repeating groups! It’s now possible to display your app data in a Pinterest style grid without custom code. See the following screenshot for a demonstration of masonry layout.
A couple of things:
In order to utilize this Masonry layout, your app has to be on new responsive engine.
Make sure you have both “Set fixed number of rows” and “Stretch rows to fill vertical space” unchecked inside the property editor for your repeating groups.
If you have both “Set fixed number of rows” and “Set fixed number of columns” unchecked, “Scroll Direction” of the repeating group has to be “Vertical”.
Check “Display items as masonry grid” and enjoy this layout style!
Use “Row cell gap” and “Column cell gap” to adjust the gaps between cells. Separator styles will have no effect over masonry layout.
If you want to read more, please check out the Bubble manual for Masonry layout here
Right now, only vertical masonry is supported. Try out the feature and let us know your feedback!
Try out Masonry layout in this interactive online tutorial!
Also, here is the Youtube video How to create a Masonry Grid Layout in a Repeating Group | Bubble.