Ecommerce collection list layout

[Alex_Strange]

Hi,

I am trying to replicate a collection list layout on one of my pages and I am struggling to get it to work. I want each row to contain 5 items and pull the same aspect ratio for the images as in the screenshot below. As far as CSS between the pages, they seem to match up. Can someone help identify what I am missing?

---

Here is my site Read-Only: Link

[Pablo_Cortes]

Hello @Alex_Strange, welcome to the community!

So what you have to do is first limit the numbers of products you show on your first row

Then you want to set the display of your collection list to grid

and then on the products that you want to be taller set the columns to 1.25 fr instead of 1fr

And that should work for your first 5 products, repeat the process for the other 5 products. I hope this helps!

[Alex_Strange]

Thank you! i got hung up on trying to replicate the sample. My only follow-up is how do you get the parent div of the images to match their height? its overflowing and if I add content under them its hidden?

[Pablo_Cortes]

Hey @Alex_Strange, so I don’t know what type of layout you are trying to accomplish but if you want the images to match the height of the parent div, remove the top padding you have on your div block 2 and change the position of your image6 from absolute to static. I hope this helps!