Streaming live at 10am (PST)

Help with offset grid CMS items

Hi guys. I’m building a collection list with projects on display. I thought maybe a combo of flex and grids would be the best way, but I wonder what would be the best practice to get vertical offset on the different collection items? See my attached screen from Figma.

I do not think this is a good practice when it comes to user friendliness for the client: Dynamic Grid Item Offset
Any other solution I welcome.

Thanks in advance.
Hope it all made sense :slight_smile:

EDIT: Hi! Got help. If anyone else wonders. This is how you do it:

@media only screen and (min-width: 1200px) { .w-dyn-item:nth-child(even) { margin-top: -140px; } }

Here is my site Read-Only: https://preview.webflow.com/preview/scenario-web?utm_medium=preview_link&utm_source=designer&utm_content=scenario-web&preview=c326176fedf0ab7284e9580a7e467d72&mode=preview

Perfect! I was going to point you in that direction.

More cool things you can do on Collection Lists with pseudo-classes:

https://sbx.webflow.io/nth-child-targetting-for-coloring-an-inner-element

Hi Vincent. Thank you so much for the link. Bookmarking it for future references :slightly_smiling_face:

Cheers,
Tom

Hi Vincent! I have two collection lists on a page and want only one offset how can I control only this one?

You give each list a different class. Like .list-a .list-b

Then your code for the list you want to have an offset in:

.list-a .w-dyn-item:nth-child(even) { margin-top: -140px; }

Because there is a space between .list-a and .w-dyn-item, it means: Target the .w-dyn-item element that has a parent with the .list-a class