CMS collection list in project section

Hello everyone,
That is the project section on our webflow website design like we see the layout is different, every two columns are different in the same row.
How I can create CMS Collection List like that.

Thank you.

Here is my site Read-Only: Webflow - KAII LAB
(how to share your site Read-Only link)

Hi @AbanoubEid thanks for your post. I took a look at the project in the read only link, thanks for that, however it looks like the elements have been removed:

I might recommend to take a look at some good Flexbox examples for aligning content here:

I hope this helps

1 Like

This is a website design of the portfolio section on the Homepage. We need that to be a CMS collection list to update with the portfolios. However, each column has slight differences. One has the title of the portfolio on top and one has the title of the portfolio on the bottom (as can be seen in the screenshot). Any recommendations on how this can be implemented?

Hi @AbanoubEid, thanks for your reply.

I took a look at the site in the designer and on the published site and now I am seeing the elements aligned, see here: KAII LAB 2021-10-14 at 8.09...

Were you able to get that restyled with your expected results?

I usually use flexbox to align items, to have things be consistent I would recommend that the class for the collection item has the same height for all items so that there is no extra whitespace on the page.

Webflow does not auto calculate for item height when creating columns for uneven column heights can make things appear misaligned.


Thank you Dave for your help me, actually I was used flexbox and :nth-child(even){}.
and it works

1 Like

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