I love Packery, but sometimes its rounding causes gaps only at particular screen resolutions when using proportional scaling. Note the small white line in the image below.
This error was frustrating and mind-bogglingly bizarre. I spent hours combing the GitHub page to see similar-but-not-quite fixes. With the ability for this project to have 1-4 items in a row, I couldn’t simply target nth-child. I didn’t want to write crazy jquery just for a simple fix.
In the end, I had a lightbulb moment:
transform: scale(1.01);
CSS Transforms don’t affect the occupied space but causes the images overlay. Knowing this, I could force the images to be a hair larger their parent container without stacking issues. Someone somewhere may be saved a lot of heartache That’s it! Problem solved.