I have a figma design i am recreating in wix studio and i need to achieve a Masonry Layout using a repeater. Just want to know if that is possible. Thanks

Ask the community
, ,
1

I have a figma design i am recreating in wix studio and i need to achieve a Masonry Layout using a repeater. Just want to know if that is possible. Thanks

This is what am trying to achieve

Testimonials
Testimonials1080×1014 185 KB

I was able to set the repeater item height to fit content, but am unable to achieve the Masonry Layout. How to i achieve this?

Thank you

2

Wix Studio’s repeaters don’t support Masonry Layout natively, but you can achieve it using CSS Grid or Flexbox with JavaScript. First, set the repeater items to fit-content for dynamic height. Then, use Custom CSS in Wix Studio to apply display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-auto-flow: dense; to distribute items in a Masonry-like structure. If that doesn’t work perfectly, you can use JavaScript with masonry-layout.js to dynamically arrange items based on height. Let me know if you need help implementing it.

3

Hi. Thanks for the reply

I am making use of the repeater because it is connected to the cms, which i can’t do using a Flexbox. Here is a screenshot of what i was able to achieve in wix studio

Wix studio 2
Wix studio 21916×879 221 KB

I’m still not getting the Masonry layout even with provided CSS. Is there a way around this? If no, I can proceed with using the Flexbox.

Thank you

4

check out this tutorial to see if it may suit your requirements

5

Thanks for the video, yes it was helpful

1 Like