desandro / masonry

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

Layout error if grid container has border #1122

Open bluerayyy opened 4 years ago

bluerayyy commented 4 years ago

Here is a CodePen and also a Stackoverflow threat to explain the problem I am having.

Simply put, it seems if the grid container has a border, the coresponding calculations to fit the items in masonry layout seem to be slightly off. I have accounted for the borders, margins and paddings of the container and the items within it, but the issue persists.

Thanks a lot!

kitsguru commented 4 years ago

As a general comment you might want to apply border-box to all elements - recommend best practice - and not just for masonry.

* {
        box-sizing: border-box;
    }

I made that change in your codepen, and it did adjust the layout. Not sure if that is what you intend but it made a difference.