砌体项目溢出到下一列

Question

这是我的HTML：

<div class="masonry-container">
    <div class="masonry-item">
        <!-- post thumbnail -->
        <a href="#">
            <img src="">
        </a>
        <!-- /post thumbnail -->
        <div class="masonry-body">
            <h3><a href="#" title="">Title</a></h3>

            Some text...
        </div>
    </div>
</div>

.masonry-container并没有指定高度，但是发生的情况是，在某个随机高度之后，最后一个项目溢出到下一列中，从而导致项目在网格中显得破损。

我的CSS：

.masonry-container {
    width: 100%;
    columns: 3;
    column-gap: 20px;
    .masonry-item {
        margin: 10px;
        background: #fff;
        overflow: auto;
        img {
            max-width: 100%;
        }
        .masonry-body {
            padding: 30px;
            max-width: 100%;
            h3 {
                font-family: 'Playfair Display';
                font-weight: 700;
                font-size: 1.6em;
            }
        }
    }
}

screenshot