Streaming live at 10am (PST)

Vertical Grid Layout Help (using CMS collection... plus horizontal scroll?)

Hi everyone,

Newbie here. I’d like some help with a design layout for a portfolio website i’m building. I know what it is i want to make but i’m unable to find the help i need, having trawled through endless YT videos/tutorials, so i’m hoping someone here might have some ideas.

In short, i’d like to create a vertical grid layout which alternates having the project name/image at the top/bottom. (Ideally i’d like this to also include a horizontal scroll so that i can use images that aren’t too heavily cropped, and scroll through my projects left to right, but i understand that Horiz. scroll is a fairly complex task so this might be a big ask).

I have been using CMS collections to import the data i want to use, but can’t figure out:

  • Firstly, whether it’s possible to get a CMS-controlled grid to alternate its layout every other column.
  • Secondly, how to achieve the vertical desired look using the grid feature. All attempts so far have ended up with vertical alignment but i’m unable to get the text boxes to align as i’d like.

I’ve attached an image showing the desired effect i want to achieve, along with my current horizontal grid from the WF designer. I’d prefer to use CMS collections to create this, so that i can add/edit the work in the future, but perhaps it’s not something that is going to work with this method - just need someone to tell me!

– images are all placeholder as haven’t imported all data yet!–

Here is what i’m trying to recreate:

Here is what i’ve currently got:

Any and all tips would be greatly appreciated. I’m happy to put the work in, just need pointing in the right direction :slight_smile:

Thanks,
Mostyn


Here is my site Read-Only: Webflow - Portfolio 2021

Hi,

Maybe this link will help you: Alternating Layouts within Collection Lists - #12 by Byron

Cheers