Introducing Masonry Layout for Repeating Groups

[yi.zhang]

Hi everyone,

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:

1. In order to utilize this Masonry layout, your app has to be on new responsive engine.

2. 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.

3. 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”.

4. Check “Display items as masonry grid” and enjoy this layout style!

5. 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!

Masonry Grid for Repeating Groups | Bubble Feature Spotlight | Arcade

Also, here is the Youtube video How to create a Masonry Grid Layout in a Repeating Group | Bubble.

[J805]

Nice! Looking forward to trying this out.

[doug.burden]

We out here

[JohnMark]

This is great @yi.zhang . Now I’m motivated to start (convert) using the new responsive engine.

[sudsy]

Niiiice!

[justin.hume]

Yes yes yes yes yes yeeeessss!

[jobs]

Awesome. These new features just keep coming

[brad.h]

Excellent additon. Now we just need a way to compress before uploading multiple images…to make it quicker for users to upload multiple images.

[keith]

Same here @JohnMark. Nice to see more options for commonly-desired layouts!

[Guru]

Nice !!!

[troy.roberge]

I’m going to try this later, but I’m curious how random image sizes will look… These image sizes were clearly well curated and laid out.

If anyone tests this and wants to show mobile and desktop “real world” examples, please do!

[bubblealex]

Very cool! The layout options for repeating groups keeps growwwwwwingggggg

[bestbubbledev]

What have you been waiting so long? Don’t tell me it’s Masonry grid

[bestbubbledev]

I second this!

[troy.roberge]

I wonder… Do they draw straws for who posts new features, or do you think it’s the engineer behind the project?

[pbost2002]

excellent. keep it up, Bubble!

[shu.teopengco]

Thanks for the update!

Can we also have this feature for Groups with a Row container layout?

[yi.zhang]

I cannot speak for the future, but currently, feature announcement is either done by PMs or engineers who worked on the feature.

[equibodyapp]

Thanks for working on this feature @yi.zhang !!

[ihsanzainal84]

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.