Product Collection Grid - 3 element different

Design help CMS
1

Hello,

I am trying to replicate this design as a Product Collection to be able to use add-to-cart buttons :

Capture d’écran 2022-08-16 à 17.38.30
Capture d’écran 2022-08-16 à 17.38.301920×1531 116 KB

I don’t know how I can say that the nth child element 3 needs to be full-width (or take two rows).

Can you tell me what I should try?
You can find what I tried just below the grid example in the project.

I tried this method but it didn’t work: Uneven grid with CMS collection

Here’s my webflow read-only link : https://preview.webflow.com/preview/hereticcoffee?utm_medium=preview_link&utm_source=designer&utm_content=hereticcoffee&preview=e1424927a9c764fb8378d4b519b61de3&workflow=preview

Thanks !

2

Hello, can someone help ?

3

HI @tvog here is snippet you can use

.collection-item:nth-child(3){
	grid-column: span 2 !important;
}

as there is somewhere code that is overwriting basic grid behaviour you have to add !important to make it work.