Custom grid layout that alternates cells with different width

Design help Layout & Design
#1

Hello Community,

How would you build such a grid layout for blog post (the number of posts is dynamic so using a CMS collection for each cell is not an option)

Thanks

Project grid
Project grid1246×1445 8.63 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

I found a way using the nth element and I am editing the post in case someone else is interested

Screen Shot 2023-01-09 at 14.42.06
Screen Shot 2023-01-09 at 14.42.061673×999 133 KB

Collection Item as inline
Item as an inline block

Custom code as embedded

<style>

/* Customize every 1, 5 and 8 collection item itself */
.collection-item:nth-child(4n+1) .item-inside-collection-item {
	background-color: yellow;
	width: 65%;
  margin-right:1%;
}

/* Customize every 2, 6 and 10 collection item itself */
.collection-item:nth-child(4n+2) .item-inside-collection-item {
	background-color: red;
	width: 34%;
}

/* Customize every 3, 7, 11 collection item itself */
.collection-item:nth-child(4n+3) .item-inside-collection-item {
	background-color: blue;
	width: 34%;
}

/* Customize every 4, 8, 12 collection item itself */
.collection-item:nth-child(4n+4) .item-inside-collection-item {
	background-color: orange;
	width: 65%;
   margin-left: 1%;
}

</style>
#3

hi @EricLl nice approach. As there is always many ways how to there are another solutions that can be found in forum when search “uneven collection grid” etc.

https://discourse.webflow.com/search?q=uneven%20collection%20grid