Streaming live at 10am (PST)

Alternate pattern design for Collection list

Greetings,
I would like to create a similar design to the below image but with a Collection List. Is there a workaround for this issue?
Also, below is my read-only link.

https://preview.webflow.com/preview/lilimuslihah?utm_medium=preview_link&utm_source=designer&utm_content=lilimuslihah&preview=b11bd1ca024ee342f284ed8d49fa542b&pageId=61629d9c04ce9feb07534a0f&workflow=preview

Thanks,
Fad


hi @Fad_Fad here is how to do that with custom CSS code

Thank you for the reply!
Hmm, I’ve taken a look through the codes, is it possible on a grid layout instead of flex?

hi @Fad_Fad yes that’s why I have posted this link. Did you ever try it? Anyway here is simple example

collection list is set as grid and each collection item is set as flex than you just apply this code

<style>
.collection-item:nth-child(even){
  flex-direction: row-reverse;
}
</style>

RESULT

EDIT: If you have your collection-item set as Grid you can use this code.

<style>
.collection-item:nth-child(even){
  direction: rtl;
}
</style>

so now you have two possible ways how to do that in CSS.

RESULT 2

Do you need further assistance with this request?

Hey Stan, yay it is working now. Thank you for showing the different examples for flex and grid layouts respectively.

1 Like

hi @Fad_Fad I’m glad that helped. If you do not have further questions related to this topic feel free close your request as solved

Have a great day :wink:

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.