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

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

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

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.

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

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

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

Thanks for the video, yes it was helpful

1 Like