Pinterest-Style Cascading Grid Layout

Yes, I think this is possible with a few workarounds. :slight_smile: I just created this forum example:

Preview:

Editor:

So if you kept your setup with 1 row with 4 columns, that would have the element height of each image adjust in the cell, but the horizontal dividers would remain the same from row to row (shown below)

To workaround having negative space between the rows, I created four repeating groups (1 column, 4 rows) with extended vertical scrolling. In your application the data structure will be different, but in the forum example I just created a new Data Type called “Pinterest Grid”:

With this setup, each Image also has an assigned “Group Number” (1, 2, 3 or 4). This is because there are four repeating groups (each with only one column):

Each repeating group does a “Search for Pinterest Grids”, and in that constraint is a Group Number.

For example, in the first repeating group on the far left, the search constraint is this:

The second group only shows ‘Group 2’ images:

And that same process repeats for the 3rd and 4th Repeating Groups. With this setup, there won’t be any negative space between the rows. To make sure everything was adjusting, I created these entries within the App Data tab:

In preview mode the repeating groups adjust dependent upon the image, as well as the text element within the cell. In this example, I used static text within the text element, but the text you use could definitely be the result of a dynamic expression (a caption of the image created by the User, for example).

This way, there won’t be any wasted space because the cell in each repeating group adjusts its height. I haven’t done this with User uploaded images, but I think this is definitely possible if you were to create a workflow which detected which Group number should be assigned to the User’s most recently uploaded image. If this is something you’d like to set up in your app, I can definitely try to help with the data structure/workflow parts to ensure that everything is uploaded in the correct order.

7 Likes