javascript - 如何水平使用砌体？

我有以下HTML代码

<div class="grid">
    <div class="grid-item"><div class="numero">1</div></div>
    <div class="grid-item"><div class="numero">2</div></div>
    <div class="grid-item"><div class="numero">3</div></div>
    <div class="grid-item"><div class="numero">4</div></div>
    <div class="grid-item"><div class="numero">5</div></div>
    <div class="grid-item"><div class="numero">6</div></div>
    <div class="grid-item"><div class="numero">7</div></div>
    <div class="grid-item"><div class="numero">8</div></div>
    <div class="grid-item"><div class="numero">9</div></div>
    <div class="grid-item"><div class="numero">10</div></div>
</div>

随着以下CSS

.grid{
    column-count: 2;
    column-gap: 1em;
}

.grid-item{
    margin: 10px;
    background-color: #333;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

.grid-item:nth-child(odd){
    height: 320px;
}

.grid-item:nth-child(even){
    height: 500px;
}

.grid-item .numero{
    margin: 10px;
    padding: 10px;
    color: #333;
    background-color: #fff;
    border-radius: 50%;
    width: 10%;
    height: auto;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
}

@media (max-width: 768px){
    .grid{
        column-count: 1;
    }
}

我也使用离开这里的Masonry插件



这给了我以下结果:

Imagen

如您所见，项目将在第一列中下拉，然后继续下一个

好像它有这样的数组:

1 - 4 - 7 - 9
2 - 5 - 8 - 10
3 - 6

我希望将这些物品水平和向下放置

1 - 2 - 3 - 4
5 - 6 - 7 - 8
9 - 10

您给我什么解决方案，请帮忙。
对不起英语...

最佳答案

从Masonry options documentation:

horizo​​ntalOrder

对项目进行布局以(大部分)保持水平的从左到右的顺序。
horizontalOrder: true
这是一个CodePen演示该选项。将horizontalOrder: true更改为horizontalOrder: false，以查看如何更改块以切换顺序。