Turning a nice layout into a collection list with the s...

At a glance

The community members are discussing how to turn a nice layout into a collection list while maintaining the same masonry layout. One community member suggests using the :nth-child() CSS selector to target the image inside every x number of items and style them accordingly. Another community member wonders if this can be done natively without custom CSS, mentioning the ability to target the first, last, even, or odd items in a collection list using structure styles. The original poster thanks the community members and plans to try the native approach first before resorting to custom CSS. However, one community member concludes that the original suggestion using :nth-child() will likely be necessary due to the structure of the component, as there is no clean way to achieve the desired layout natively in Webflow.

Useful resources

SSusan MacPhee

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

LLauren Alexander

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.

MMatt Johnson

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

SSusan MacPhee

Thank you both so much! I will try native first and go from there. Very cool about the ability to target structure "states."

MMatt Johnson

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.

Add a reply

Community forum for knowledge and support

Turning a nice layout into a collection list with the same masonry layout