Masonry неверно отображает сетку

Пример на CodePen

Надо, чтобы 1-2-3-4 были в одном ряду, по размерам более, чем достаточно, но почему-то 2 и 3 переносятся на новую строчку. Этот пример брал из документации и менял код.

Размер контейнера 1170px

Мои стили:

.grid-item.height-50 {
    height: 200px; }
.grid-item.height-25 {
    height: 100px; }
.grid-item.width-25 {
    width: 250px; }
.grid-item.width-50 {
    width: 500px; }

JS:

var $grid = $('.masonry').masonry({
    stagger: 30,
    columnWidth: '.grid-sizer',
    itemSelector: '.grid-item'
});
$grid.on('click', '.grid-item.scale', function() {
    // change size of item via class
    $(this).toggleClass('grid-item--gigante');
    // trigger layout
    $grid.masonry();
});

В чем проблема?

Так же, 5-6-7-8-9 и 10-11-12-13-14 должны быть в двух рядах соответственно.