search

desandro / masonry

:love_hotel: Cascading grid layout plugin
https://masonry.desandro.com
16.39k stars 2.11k forks source link

Padding on selector items breaking my layout #1033

Closed ghost closed 6 years ago

ghost commented 6 years ago

Hi there,

I'm having an issue where padding on the selector items is breaking the masonry layout, even when the gutter is set when the plugin is initialized rather than in the CSS (see screenshot).

screen shot 2018-02-14 at 11 32 34 am

For some reason I'm unable to reproduce it on Code Pen, but I've made a pen with my code as it stands.

https://codepen.io/anon/pen/JprbbW

Oddly, if I add the padding after the page has loaded through the web inspector, there's no issues, and looking at the code, it almost seems like adding padding is breaking the percentPosition when the page loads.

Any thoughts?

ghost commented 6 years ago

The live iteration is here:

http://jessewinton.co/work

desandro commented 6 years ago

Thanks for reporting this issue. I'm not sure I'm able to see the issue. Were you able to resolve this?

ghost commented 6 years ago

Hmmm... I haven't been able to resolve it yet, but I don't really know how I can exhibit it without pushing the code live. My code for the whole site is here, don't know if that's helpful:

http://github.com/jrandallw/JesseWintonCo

ghost commented 6 years ago

Hello! I was able to create a test case for you here:

https://jessewintonco.netlify.com/work

Please let me know if there's anything i'm able to do.

Thanks! Jesse Winton

desandro commented 6 years ago

Thanks for that. I'll have to take a look.

I'm still having trouble tracking down what the issue is. It may be the flex CSS on .project-index-grid. Try disabling flexbox styles.

Related CodePen https://codepen.io/desandro/pen/VxzZJX

ghost commented 6 years ago

Thanks for taking a look! I removed flex, but the issue still seems to be there.

Thanks again!