broken flow of content - maybe a Pinterest Style layout??

[mrhut10]

currently when your browsing products, if an image has a taller aspect ratio it will brake up the flow of content.

see screenshot below

I believe pinterest has a very elegant solution to this see screenshot

has anyone had any experience doing such a layout??

[mrhut10]

implemented a layout like this before @lukebennett88 or @danielwilberforce91 ??

[mrhut10]

looks like some people call it a Masonry layout

[mrhut10]

I'll make a branch to test this library over the weekend.

https://github.com/eiriklv/react-masonry-component

[lukebennett88]

I've never built a masonry layout before, I have looked into it before, but it seems reasonably complicated (you can't do it with CSS alone unfortunately.) If you're happy to stick with a grid layout, I've given the images a fixed height so that all the cards are the same height which may alleviate this problem.

[mrhut10]

oh nice, i tried to do that previously, however every time i did i broke something else. if you managed to make that work, then I'll should address the main problem (haven't made an issue for it)

the main problem currently is that snipcart wont validate the sale (last step after its taken credit card details) because the HTML validator is unreliable for Gatsby. I'll make a master JSON object that the JSON crawler than pass instead.

[lukebennett88]

Awesome. Well I just have to fix the sizing of the hero image on mobile and when I've done that I'll send you a PR. No idea how to go about fixing the HTML validator 😬 Good luck!

[lukebennett88]

Not sure if you're happy with the grid system we have now and want to close this issue. I might have another solution that is pretty simple, it uses CSS columns instead of grid or flexbox. https://codepen.io/lukebennett88/pen/XwdXbj The only problems with this approach is the 'jagged edge' at the bottom of the screen and using break-inside: avoid; doesn't seem to take into account box shadows — you can see the bottom shadow of 1 of the images visible at the start of the next column at some breakpoints.

[lukebennett88]

Actually, scratch that last bit, fixed the box shadow issue. Just the jagged edge that is an issue

[lukebennett88]

Oh, it also changes the source order if that's an issue. Instead of items being laid out from left to right it would instead be from top to bottom.

[mrhut10]

thank you @lukebennett88 I think for the moment the grid layout is working well enough, I'll close this.

:)