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.
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!
Yes. A lot of us have been waiting for Bubble to natively supported masonry grids.
While it may seem weird to some of us (including myself) why a lot of veteran Bubblers have not shifted to the new responsive engine, i understand the hesitance: “Why break something that works?”
If new features and improvements can encourage them to do so, it’s a win for all of us when the day comes that the Bubble team do not have to accommodate the old responsive engine and focus their energy on more features and improvements.
Don’t tell me it’s Masonry grid