Как заполнить пустоты в Masnonry layout?

Создал такую разметку

<div class="grid">
            <div class="grid-item width-1"><img src="images/masonry/1portfolio-work-534.png" alt="work"></div>
            <div class="grid-item width-1"><img src="images/masonry/2portfolio-work-1-534.png" alt="port"></div>
            <div class="grid-item width-3"><img src="images/masonry/3portfolio-work-11-265.png" alt="port"></div>
            <div class="grid-item width-1"><img src="images/masonry/7portfolio-work-8-265.png" alt="port"></div>
            <div class="grid-item width-2"><img src="images/masonry/4portfolio-work-7-275.png" alt="port"></div>
            <div class="grid-item width-3"><img src="images/masonry/5portfolio-work-10-265.png" alt="port"></div>
            <div class="grid-item width-3"><img src="images/masonry/6portfolio-work-9-534.png" alt="port"></div>
            <div class="grid-item width-3"><img src="images/masonry/8portfolio-work-265.png" alt="port"></div>
            <div class="grid-item width-3"><img src="images/masonry/9portfolio-work-6-275.png" alt="port"></div>
            <div class="grid-item width-2"><img src="images/masonry/10portfolio-work1-265.png" alt="port"></div>
            <div class="grid-item width-2"><img src="images/masonry/11portfolio-work-5-275.png" alt="port"></div>
        </div>

В js указал такие параметры

$( document ).ready(function() {
    $('.grid').masonry({
        // options
        itemSelector: '.grid-item',
        horizontalOrder: true,
        gutter: 10
        //columnWidth: 200
    });
});

CSS

.width-1{
    width: 534px;
    float: left;
}
.width-2{
    width:275px;
    float: left;
}
.width-3{
    width:265px;
    float: left;
}
.grid-item img{
    width:100%;
    height: auto;
}

Но у меня вышел какой-то хаос