砌体-向左浮动

Question

我使用石工JS库。

我设置了4列（宽度为25％），我有6个元素。

我希望第5列和第6列从第一列开始向左浮动。 石工图书馆有可能吗？

现在第3和第4列下方显示第5和第6类。我想将其放在第二列和第三列下。

这是我的代码：

https://codepen.io/mattkr/pen/GRJwGdN

<ul class="grid">
    <li class="grid-item" ><span>Category 1</span>
    <ul class="sub-menu header-nav__group">
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
    </ul>
</li>
    <li class="grid-item"><span>Category 2</span>
    <ul data-deep="2" class="sub-menu header-nav__group">
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
    </ul>
</li>
    <li class="grid-item"><span>Category 3</span>
    <ul data-deep="2" class="sub-menu header-nav__group">
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
    </ul>
</li>
    <li class="grid-item"><span>Category 4</span>
    <ul data-deep="2" class="sub-menu header-nav__group">
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
    </ul>
</li>
    <li class="grid-item"><span>Category 5</span>
    <ul data-deep="2" class="sub-menu header-nav__group">
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
    </ul>
</li>
    <li class="grid-item"><span>Category 6</span>
    <ul data-deep="2" class="sub-menu header-nav__group">
        <li data-deep="2"><a href="">Item</a></li>
    </ul>
</li>
</ul>
</div>


$('.grid').masonry({
  itemSelector: '.grid-item',
  percentPosition: true,
});