Masonry grid possible?

Is it possible to create a masonry grid? I’ve been trying with no success so far. Is one of the versions I included possible?


1 Like

This should be a container with horizontal layout and “even space around items”. Inside that you could or should have container that will be repeated with some content and the content will have different size, I guess. So just set the height of the container to “fit content”. Or it usually wraps into a new row and leaves the white space there?

Or is there something I miss?

Okay, this was not a good idea. Sorry for that.

For the first layout option I would do a
Parent container with horizontal layout.
Three containers inside. These would be the columns.
In each of the three “column” containers I would place one more. That would be the repeated container. To make the shifted look I would suggest repeating 1/3 of all objects with each repeated container in the columns. For this you would bind the “repeat with” on the first column to a formula:

SLICE(listOfObjects, 0, COUNT(listOfObjects)/3)

On the second column:

SLICE(listOfObjects, COUNT(listOfObjects)/3, COUNT(listOfObjects)*(2/3))

And on the third one:

SLICE(listOfObjects, COUNT(listOfObjects)*(2/3))

Sample result:

How it has been created:

  1. layout tree:

  2. row container layout settings:

  3. col-1 layout setting (the same for the other columns, basically nothing has been changed here):

  4. The repeated container settings (now the formula there is just to show the different sizes)

The formula was:

repeated.current.id*RANDOM_NUMBER_BETWEEN(16, 36)
  1. This was the generation of my listOfObjects to get a repeated list on page focus event:

+1 Step to make the containers different color:


Custom palette and formula:

IF(IS_EVEN(repeated.current.id), theme.$smartColorPalette_app.negative, theme.$smartColorPalette_app.warning)

Hope this helps. :smiley:

If you want to generate a Masonry layout without repeated items then it is really just the matter of containers inside containers and setting correct sizes to them in the “Layout” tab.

3 Likes

Damn. You’re awesome. I tried with formulas but was having a rough time. I appreciate the help greatly

1 Like