Search code examples
csspackery

Packery Margin out of nowhere

Okay mates. Basically, when using the code below, I load the page and there is margin between the .item divs. However, when I resize the window the margin disappears.

I've no idea why. I don't want a margin.

Here is a codepen.io http://codepen.io/Ralphunter/pen/bNqwEX

 body {
     padding:           0;
     margin:            0;
 }
 .item {
     background-color: 	#40152A;
     width:             25%;
    
     padding-bottom:	25%;
 }
<script src="http://packery.metafizzy.co/packery.pkgd.min.js"></script>
<div id="content" class="js-packery" data-packery-options='{ "gutter": 0 }'>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Here is a codepen.io http://codepen.io/Ralphunter/pen/bNqwEX

Solution

  • I believe this is caused by a missing scrollbar when initializing Packery. Add to your CSS:

    html { overflow-y: scroll }

    (from here: https://github.com/metafizzy/packery/issues/68)