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
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>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. 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
Thank you both so much! I will try native first and go from there. Very cool about the ability to target structure "states."
my quick investigation revealed you'll likely be using 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.