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
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.
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