Предмет масонства переполняется в следующем столбце - PullRequest
Новая
       44

Предмет масонства переполняется в следующем столбце

0 голосов
/ 27 февраля 2019

Вот мой 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;
            }
        }
    }
}

снимок экрана

...