Alternate pattern design for Collection list

Design help Layout & Design
1

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

image
image844×1074 24 KB

Thanks,
Fad

1 Like
2

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

3

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

4

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

CleanShot 2021-10-11 at 09.31.05
CleanShot 2021-10-11 at 09.31.052190×1290 286 KB

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

CleanShot 2021-10-11 at 10.17.07
CleanShot 2021-10-11 at 10.17.071792×1093 211 KB

Do you need further assistance with this request?

5

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

1 Like
6

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:

7

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