html - CSS グリッド - column-count で分割されたセクションを互いに揃える

Question

「column-count」を使用して、互いに上に整列したアイテムのグリッドを作成しています (" column-gap: 0px")。

見た目は素晴らしいですが、無限スクロールを実装しようとすると問題が発生します。

最初のグリッドの下に同じ構造の別のグリッドを追加していますが、最初のグリッドのアイテムに揃えることができません..セクション間に不要なギャップを作成しています。

上記のオブジェクトへの配置に関するオプションはありますか?

私は、本当に役に立たないvertical-align標準オプションしか見つけませんでした。

これはどのように見えるかです: (アイテムは異なる高さを持っています)

.itemsSection{
    line-height: 0;
    -webkit-column-count: 3;
    -webkit-column-gap: 0px;
    -moz-column-count: 3;
    -moz-column-gap: 0px;
    column-count: 3;
    column-gap: 0px;
}

.item{
    height: auto;
    border: 1px solid #DDD;
    border-radius: 2px;
    margin-bottom: 10px;
    display: inline-block;
    vertical-align: text-top;
    padding: 3%;
    margin: 2%;
}

<div id="allItems">
<div class="itemsSection">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>
<div class="itemsSection">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>
<div class="itemsSection">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>
</div>