Cacher is the code snippet organizer for pro developers

@import "compass/css3";
@mixin respond-to($media) {
   /* Landscape phones and down */
   @if $media == phone {
      @media (max-width: 480px) {
         @content;
      }
   }
   @else if $media == tablet-portrait {
      @media (min-width: 481px) and (max-width: 768px) {
         @content;
      }
   }
   @else if $media == tablet-landscape {
      @media (min-width: 769px) and (max-width: 1024px) {
         @content;
      }
   }
   @else if $media == desktop {
      @media (min-width: 1025px) and (max-width: 1440px) {
         @content;
      }
   }
   @else if $media == large-desktop {
      @media (min-width: 1441px) {
         @content;
      }
   }
}

@mixin respondto($media...) {
   @each $mediatype in $media {
      @include respond-to($mediatype) {
         @content;
      }
   }
}

/*************************************************/

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  color: #490033;
}
.packery {
  background: #FDD;
  background: #ede5e5;
  margin: 0 auto;
}

/* clearfix */
.packery:after {
  content: ' ';
  display: block;
  clear: both;
}

.post {
  width:345px;
  height: 345px;
  float: left;
  background: #C09;
  /* border: 4px solid #333; */
  /* border-color: hsla(0, 0%, 0%, 0.3); */
}


.post.expanded {
  background: #fb6967;

}

$square-dimension: 345px;
$gutter: 10px;

.packery {
  @include respondto(large-desktop, desktop, tablet-landscape) {
    .post.expanded {
      width: $square-dimension*2 + $gutter;
      height: $square-dimension*1.5 + $gutter;
    }
  }
  @include respondto(tablet-portrait, phone) {
    .post.expanded {
      height: $square-dimension*2 + $gutter;
      width: $square-dimension;
    }
  }
}

 

// http://packery.metafizzy.co/packery.pkgd.js added as external resource

// overwrite Packery methods
var __resetLayout = Packery.prototype._resetLayout;
Packery.prototype._resetLayout = function() {
    __resetLayout.call(this);
    // reset packer
    var parentSize = getSize(this.element.parentNode);
    var colW = this.columnWidth + this.gutter;
    this.fitWidth = Math.floor((parentSize.innerWidth + this.gutter) / colW) * colW;
    console.log(colW, this.fitWidth)
    this.packer.width = this.fitWidth;
    this.packer.height = Number.POSITIVE_INFINITY;
    this.packer.reset();
};

Packery.prototype._getContainerSize = function() {
    // remove empty space from fit width
    var emptyWidth = 0;
    for (var i = 0, len = this.packer.spaces.length; i < len; i++) {
        var space = this.packer.spaces[i];
        if (space.y === 0 && space.height === Number.POSITIVE_INFINITY) {
            emptyWidth += space.width;
        }
    }

    return {
        width: this.fitWidth - this.gutter,
        height: this.maxY - this.gutter
    };
};

// always resize
Packery.prototype.resize = function() {
    this.layout();
};


var $container = $('.packery').packery({
    itemSelector: '.post',
    columnWidth: 345,
    gutter: 10
});


$(function() {
    var $container = $('.packery').packery();

    $container.on('click', '.post', function(event) {
        var $target = $(event.target);
        var isGigante = $target.hasClass('expanded');
        $target.siblings().removeClass('expanded');
        $target.toggleClass('expanded');

        if (isGigante) {
            // if shrinking, just layout
            $container.packery();
        } else {
            $container.packery('fit', event.target);
        }
    });
});

<h1>Packery - centered</h1>
<p>This feature will only work with fixed-width columns.</p>
<div class="packery">
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
  
  </div>