MUELLER Grid System (http://muellergridsystem.com) & MASONRY (http://masonry.desandro.com).

_default.scss

@import "partials/base";

// OTHER STUFF FIRST

// MASONRY
section#masonry {
    div.grid-sizer {
        width: 20px;
        margin: 0;
    }
    div.item {
        margin-right: 0;
        @extend .g-d-4;
        &.wide {
            @extend .g-d-8;
        }
        &.verywide {
            @extend .g-d-12;
        }
    }
}

_handheld-landscape.scss

@import "partials/base";

@media screen and (min-width: 480px) and (max-width: 767px) {
      
    // OTHER STUFF FIRST
    
    // MASONRY
    section#masonry {
        div.grid-sizer {
            width: 19px;
            margin: 0;
        }
        div.item {
            text-align: left;
            margin-right: 0;
            @extend .g-hl-6;
            &.wide {
                @extend .g-hl-6;
            }
            &.verywide {
                @extend .g-hl-6;
            }
        }
    }
}

_handheld.scss

@import "partials/base";

@media screen and (max-width: 479px) {
    
    // OTHER STUFF FIRST
    
    // MASONRY
    section#masonry {
        div.grid-sizer {
            width: 0;
            margin: 0;
        }
        div.item {
            text-align: left;
            margin-right: 0;
            @extend .g-h-6;
            &.wide {
                @extend .g-h-6;
            }
            &.verywide {
                @extend .g-h-6;
            }
        }
    }
}

_large.scss

@import "partials/base";

@media screen and (min-width: 1250px) {
    
    // OTHER STUFF FIRST
    
    // MASONRY
    section#masonry {
        div.grid-sizer {
            width: 25px;
            margin: 0;
        }
        div.item {
            text-align: left;
            margin: 0;
            @extend .g-l-4;
            &.wide {
                @extend .g-l-8;
            }
            &.verywide {
                @extend .g-l-12;
            }
        }
    }
}

_tablet-portrait.scss

@import "partials/base";

@media screen and (min-width: 768px) and (max-width: 980px) {
    
    // OTHER STUFF FIRST
    
    // MASONRY
    section#masonry {
        div.grid-sizer {
            width: 20px;
            margin: 0 !important;
        }
        div.item {
            text-align: left;
            margin-right: 0 !important;
            @extend .g-tp-4;
            &.wide {
                @extend .g-tp-8;
            }
            &.verywide {
                @extend .g-tp-8;
            }
        }
    }
}

masonry.js

<script src="/path/to/masonry.pkgd.min.js"></script>
<script>
    // window.load instead of document.ready if
    // you use web fonts
    $(window).load(function(){
        var $container = $('section#masonry');
        $container.masonry({
            itemSelector: ".item",
            gutter: ".grid-sizer"
        });
    });
</script>