JG image grid compensation

by sambaldwin

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div class="isotope">
    
<div class="container">
    <img src="http://placehold.it/500x400"/>
</div>
<div class="container portrait">
    <div class="img">
        <img src="http://placehold.it/500x800"/>
    </div>       
</div>
<div class="container">
    <img src="http://placehold.it/500x400"/>
</div>    
<div class="container">
    <img src="http://placehold.it/500x400"/>
</div>        
<div class="container">
    <img src="http://placehold.it/500x400"/>
</div>    
<div class="container">
    <img src="http://placehold.it/500x400"/>
</div>    
<div class="container">
    <img src="http://placehold.it/500x400"/>
</div>        
<div class="container">
    <img src="http://placehold.it/500x400"/>
</div>       
</div>

CSS

* {
    margin:0;
    padding:0;
    -webkit-box-sizing: border-box;
}

img {
    max-width:100%;
    height:auto;
    display:block;
}

.img img {
    max-width:120%;
    height:auto;
}

.container {
    background:red;
    width:33%;
    float:left;
    padding:25px;
    border:1px solid #ddd;
    height:auto;
    overflow:hidden;
}

.container.portrait .img {
    overflow:hidden;
}

JavaScript

$(".container.portrait").css("height", ($(".container.portrait").height()+2)+"em");
// add height to container 

//$(".img img").css("width", "+=10px");


    // initialize Isotope
    $('.isotope').isotope({
      // options...
      resizable: false, // disable normal resizing
      columns: 3 // set columnWidth to a percentage of container width
    });