Masonry различная ширина колонок

Необходимо получить структуру плиток как на изображении, используя библиотеку masonry.

Так же необходимо чтобы порядок плиток не нарушался.

Проблема в том, что не получается сделать такую структуру, как на изображении. Если я указываю размеры плиток 30% 40% 30%, они перестраиваются в неверном порядке. Но если указать 25% 50% 25%, то плитки становятся нужным образом.

css

* { box-sizing: border-box; }
        body { font-family: sans-serif; }
        /* ---- grid ---- */
        .grid {
            margin: 0 !important;
            background: #EEE;
        }
        /* clearfix */
        .grid:after {
            content: '';
            display: block;
            clear: both;
        }
        /* ---- grid-item ---- */
        .grid-sizer,
        .grid-item {
            width: 30%;
        }
        .grid-item {
            height: 120px;
            float: left;
            background: #D26;
            border: 2px solid #333;
            border-color: hsla(0, 0%, 0%, 0.5);
            border-radius: 5px;
        }
        .grid-item--width2 { 
            width:  40%; 
            height: 240px; 
        }

html

<div class="grid">
          <div class="grid-sizer"></div>
          <div class="grid-item"></div>
          <div class="grid-item grid-item--width2"></div>
          <div class="grid-item"></div>
          <div class="grid-item"></div>
          <div class="grid-item grid-item--width2"></div>
          <div class="grid-item"></div>
          <div class="grid-item"></div>
          <div class="grid-item grid-item--width2"></div>
          <div class="grid-item"></div>
        </div>

js

 $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    gutter: 0, //Отключить отступы
    percentPosition: true, //Позиционирование в процентах
    horizontalOrder: true // горизонтальный порядок плиток (по порядку)
    });