Design help needed for mosaic photo-gallery

[Maydris (Robert Bailey)]

Hey there,

So I am in the process of developing a site for a client that we are converting to a Shopify template.

On the project’s Portfolio’ page, we were developing a mosaic-style photo gallery using columns defined in the collection list, which for the most part works great. The only issue is like the images wrap to the next line they seem to keep the spacing of the object before them in the stack.

This leads to the images being affected by the margin of the sibling before it in the stack. This is desirable in the same columns, but not when it’s being carried over to the top of a new column making them appear misaligned.

Any ideas on how I could fix this or build it differently where a collection list will be able to add new images into the mosaic pattern?

Any help would be appreciated! Thanks.

Here is my public share link: LINK

[mikeyevin]

I’d recommend just adding the padding to the top of the image wrapper as opposed to the bottom—this way all of the columns start at the same place:

[Maydris (Robert Bailey)]

That might be the best option. Certainly the simplest.

If anyone else has different suggestions I’d be interested to know if other methods exist just to get a better understanding of how I could approach building the thing.

But for solving the issue, this works. Thanks!