How to make each cell of collection grid fit with the size of image to avoid vertical space ? Thanks !
Topic summary
A user working with the Dawn theme seeks to create a Pinterest-style masonry grid layout for their collection page, where product images of varying sizes (artwork paintings) display with consistent spacing between them, rather than leaving vertical gaps.
Attempted Solutions:
- Initial suggestions included optimizing image sizes using compression tools or Shopify’s Image Resizer
- Adjusting product size and ratio settings in Dawn’s customization options
Resolution:
The user resolved the issue independently by implementing a custom JavaScript file combined with absolute positioning CSS to achieve the desired masonry layout effect. This approach allows images of different dimensions to fit together without creating unwanted vertical space while maintaining their original aspect ratios.
1 Like
Hi @Leon54
If I understand you here correctly, you need to optimize image size at first and then meet the size of collection cells to get rid of vertical space. You can use Tools like Image Resizer from Shopify or Image Compression to do this work.
Moreover, you can also share an example screenshot here in this topic to know the real situation encountered presently, so that I can provide you with a better answer. Thank you!
I have differents size of image because I sell artwork paintings. I want to keep my images like that. But when it’s display in the collection grid it’s not fit with the smaller one. I would like Pinterest style with the same space between each image
I forget to mention that I use Dawn theme
Hello @Leon54
In the customization option, you can adjust the product size and ratio. A screenshot is attached; please see the screenshot below.
I’ve already used that option but doesn’t work.
Hi @Leon54 , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks
I found the solution by adding javascript file and using absolute position.
Thank you !