Transcript

In this Quick Tip, we're going to learn how to turn a repeating group into a masonry grid display. With a simple checkbox, you can create Pinterest-style boards and galleries.

Imagine you have a repeating group on your page, and when you press Preview, it shows a typical layout with a list of pictures. Each cell has an image element, one for each picture in my database. In order to see the option to use the masonry grid, we need to first make sure that we have two settings unchecked: "Fixed number of rows" and "Stretch rows to fill vertical space". Both of these options would prompt a different kind of layout than what a masonry grid could use, so only once they're unchecked do we see the option "Display items as a masonry grid".

Once we check that box, we can set the "Row cell gap (px)" and "Column cell gap (px)" to control the space in between each cell (you could say 10 pixels, for example). Next, you'd want to make sure your images aren't all fixed at the same proportions as each other, otherwise you won't see the proper masonry grid layout show up. To fix this, you can set the "Run-mode rendering" on your image element from "Zoom" to "Rescale". That way, each image will resize differently to fit its element, depending on the image's original proportions.

Next, you can also make sure that the image doesn't have a fixed height by unchecking "Make this element fixed height" in the Property Editor of the Image element. That way, some images will stretch taller than others, giving you the overlap we want from a masonry grid layout.

To set the number of columns on your masonry grid, there's two approaches you could take. You could simply set a fixed number of columns by checking "Set fixed number of columns" and setting the value. Alternatively, if you want your grid to shrink responsively, instead of having a fixed number of columns, you could just set a min width to the columns by setting the pixels next to "Min width of column" to a number such as 250 px, for example. You set set this value to make sure each column is at least as wide as each Image element.

Just take note: with no fixed number of columns, scroll direction is now an option. To keep masonry grid available, we'll need to make sure the "Scroll direction" remains set to "Vertical". Now, the number of columns in your grid will be dictated by however wide the repeating group can be.

If you want your repeating group to stretch to fit the whole page, you can set the max width on the Layout tab of the Repeating Group's Property Editor to "inf". Then, if you want to define a "Max width" to whatever group contains your Repeating Group, you can see how the grid adapts. If the Repeating Group has no parent group apart from the page, you could also just set a max width on the Repeating Group itself. Whether you do 800 pixels or 550 pixels, the grid will still be responsive, but the number of columns will be limited to filling in that max width.

Keep playing around with your own Repeating Group settings, as well as the settings of any parent groups that may contain it.

That's it for this Quick Tip! For more, be sure to check out Bubble Academy.