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