Responsive Pinterest Grid generator by ADD-X! Cascading grid layout with no-code

🕹️DEMO SANBOX: https://addxnocode.com/pinterest_grid

⚙️BUBBLE EDITOR: https://bubble.io/page?type=page&name=pinterest_grid&id=add-x-1&tab=tabs-1

⸏⸏⸏⸏⸏⸏⸏⸏⸏⸏⸏⸏⸏⸏⸏⸏⸏⸏⸏⸏⸏⸏⸏

Why ADD-X Masonry / Pinterest grid plugin is better than the built-in solution?

🦸‍♂️Works with fewer errors than a bubble in built solution that most of the time generates a grid in the wrong way.

💻📱Auto-responsive for different screen sizes compared to bubble’s grids which are breaking and require custom settings for adaptiveness.

📐Multiple alignment and overflow settings.

🎯Generate ADD-X Masonry / Pinterest grid via custom events. It is not possible with Bubble’s grid which can only be generated by page upload.





🔗INSTRUCTION WITH IMAGES :

https://addxnocode.com/pinterest_grid

🎥VIDEO TUTORIAL
https://youtu.be/jeChnYm8zUo?si=vE2DDItDfslWRaZF

We have made a simple guide, you can also find us on YouTube and watch a video of how-to install and configure  the plugin in the “Video Guide” tab.

🔸The plugin has one action - "Structure Pinterest grid".

Run it at "Page is loaded" for instant display.

Now let's look at how you will need to configure your repeating group for better performance.
1. Set the ID of your repeating group. Example: Pinterest_my_element
2. In Repeating group select “data source” and set "Show all items immediately" to TRUE value.
3. Set the minimum pixels (px) number (we recommend 50px) for height rows.


🔶Then take a look at the settings of the group inside the repeating group and the settings of images.

1. Set a constant width value in pixels (px).  For setting responsive UI we can change the width of the group depending on the screen size. Example: 300px for desktop and 150 px for mobile.
2. Make the min height smaller, for example: 30px.


🔶And last one: setting up the image inside the groups:

1. Set width to 100%
2. Make the min-height smaller (30px), it will increase to the required size.


🔶Now let’s up the the “action”:

1. Insert ID that was created in the repeating group.
2.Group’s column width can be custom or left empty (we recommend to not set). If it is empty, it will automatically take the group width value.
3. Use other / remaining settings to align the grid vertically and horizontally, you can choose the best alignment position by yourself.
4. “Overflow” settings are needed to crop or scroll elements that do not fit in the repeating group.

——

Now It should work!

🙌If you have any difficulties or find a bug, contact us via [email protected]. We will help everyone with installation, and configuration if necessary.

Pay attention to the setting “Layout” in repeating group and items from it.
If you want to add an Image Description, create a new group with the description next to the specific image.