Susy grid gallery or columns layout with different heights

Question

I wonder if there is an easy way to accomplish a grid with different heights using susy gallery or the column system, I want it to look like this image:

My problem is when I try to work with the gallery system it seems to work only with blocks with the same size and when I try with the column system it seems very messy for me. My solution so far was to create a 2 column layout and place the images inside with some padding, here is the code:

.homeGallery {
margin-bottom: 10px;
.wrapperMaxWidth & {
    &:nth-child(2n) {
        @include span (6 last);
        }
    &:nth-child(odd) {
        @include span (6);
        }
    }
}
.BigIMG{
    height: 300px;
    }
.SmIMG{
    height: 145px;   
&:nth-child(1){
    margin-bottom: 10px;
    }
}

And the HTML

<div class="homeGallery">
    <div class="areasFill BigIMG">
        <img src="something.jpg">
    </div>
</div>
<div class="homeGallery">
    <div class="areasFill BigIMG">
        <img src="something.jpg">
    </div>
</div>
<div class="homeGallery">
    <div class="areasFill BigIMG">
        <img src="something.jpg">
    </div>
</div>
<div class="homeGallery">
    <div class="areasFill BigIMG">
        <img src="something.jpg">
    </div>
</div>