How to get 2 small CMS items followed by 1 large, taking up 2 spaces horizontally

Hi,
I am making a webpage for 100% cotton fabrics and would like to have CMS that would look like a puzzle made of bigger and smaller pieces.
I want e.g. 2 small clothing items followed by 1 large one taking up 2 spaces vertically than 2 spaces vertically etc.
How do I do that? It seems with CMS you cant do that…
Here my preview link:

https://preview.webflow.com/preview/cotton-and-linen?utm_medium=preview_link&utm_source=designer&utm_content=cotton-and-linen&preview=b64d64f92a900161657f47d5a5d43c21&mode=preview

Also, would be nice to get the text inside the images…
Thanks!
Marta

Here is my public share link: LINK
(how to access public share link)

Hi Marta,

Site looks great - and I like your puzzle idea!

I think I have found out a solution. There would be more complex way to achive this using custom CSS. However, @WebflowCommunityTeam have released a new feature, where by you can style each post (Odds & Evens) where by the first post will be styled one way, and the next one will be styled different. The article is here explaining in more detail - Style first, last, even, and odd items in Collection Lists | Webflow Features

But is this what you was looking to achieve?

What I done was remove the image, and add the image to the background of the ‘collection item’ and styled the image for ‘Odd’ to be bigger and have negative margin. And for the ‘Even’ I made the image smaller, pushed up the placement and made the container smaller.

Let me know if you get stuck maybe I could make a short video helping out.

Best of luck!

Steve | 3SIX5 Digital