Как настроить Masonry?

Question

[Qurel]

Макет:

Как получается у меня:

Код:

.grid
      .grid-item.grid-item--width2
        .grid-item__img
          img(src="static/img/content/portfolio/photo-1.jpg", alt="Photo")
      .grid-item
        .grid-item__img
          img(src="static/img/content/portfolio/photo-2.jpg", alt="Photo")
      .grid-item
        .grid-item__img
          img(src="static/img/content/portfolio/photo-3.jpg", alt="Photo")
      .grid-item
        .grid-item__img
          img(src="static/img/content/portfolio/photo-4.jpg", alt="Photo")
      .grid-item.grid-item--width2
        .grid-item__img
          img(src="static/img/content/portfolio/photo-5.jpg", alt="Photo")
      .grid-item.grid-item--height2
        .grid-item__img
          img(src="static/img/content/portfolio/photo-6.jpg", alt="Photo")
      .grid-item.grid-item--width2
        .grid-item__img
          img(src="static/img/content/portfolio/photo-7.jpg", alt="Photo")
      .grid-item
        .grid-item__img
          img(src="static/img/content/portfolio/photo-8.jpg", alt="Photo")
      .grid-item.grid-item--width2
        .grid-item__img
          img(src="static/img/content/portfolio/photo-9.jpg", alt="Photo")
      .grid-item
        .grid-item__img
          img(src="static/img/content/portfolio/photo-10.jpg", alt="Photo")
      .grid-item
        .grid-item__img
          img(src="static/img/content/portfolio/photo-11.jpg", alt="Photo")

.grid
    max-width 976px
    margin 0 auto
    &::after
      content ''
      display block
      clear both
    &-item
      float left
      width 290px
      height 230px
      border 1px solid red
      &--width2
        width 390px
      &--height2
        height 460px
      &__img
        height 100%
        img
          width 100%
          height 100%

let $grid = $('.grid').imagesLoaded(function() {

    $('.grid').masonry({
        // указываем класс элемента являющегося блоком в нашей сетке
        itemSelector: ".grid-item",
        // true - если у вас все блоки одинаковой ширины
        singleMode: false,
        horizontalOrder: true,
        columnWidth: 290,
        initLayout: true,
        // перестраивает блоки при изменении размеров окна
        isResizable: true,
        // анимируем перестроение блоков
        isAnimated: true,
        // опции анимации - очередь и продолжительность анимации
        animationOptions: {
            queue: false,
            duration: 500
        }

      });

  });