Relume Community Icon

Home

Announcements
Figma Support
General
Showcase
Webflow Support

Powered by Tightknit

Convert Masonry Layout to Collection List in Relume | Relume Community

Convert Masonry Layout to Collection List in Relume

·Jun 14, 2024 04:15 PM

Does anyone know if you can turn this nice layout into a collection list? Keeping the same masonry layout in a collection list? https://www.relume.io/components/portfolio-12

4 comments

· Sorted by Oldest

Lauren A.
·
Susan M. You could try using :nth-child() to target the image inside of every x number of items to style them however you see fit. This snippet
<style> .portfolio12_item:nth-child(2n) .portfolio12_image1 { aspect-ratio: 1 / 1; } </style>
Creates this layout (see image) in a collection list. In this instance using 2n creates a fairly grid like layout because all the content is the same, but using 5n or anything else still looks like a masonry layout.
❤️1
Matt J.
·
Lauren A. so good! I've used this trick a couple of times and it works great. I wonder though, if this specific component "could" be done natively without any custom CSS? Using the structure styles of a collection item you can target the first or last item, or the even/odd items with specific styles. We go through this briefly in this doc that we just released a couple days ago. https://www.relume.io/resources/docs/adding-cms-collections-to-components#collection-item-structure-styles
👀1
Susan M.
·
Thank you both so much! I will try native first and go from there. Very cool Matt J. about the ability to target structure "states."
Matt J.
·
Susan M. my quick investigation revealed you'll likely be using Lauren A. original suggestion because of how that component is structured - you'll need to use custom CSS to target children within an nth-child of the collection list. There's no clean way to do that natively with Webflow from what I understand.
👍1