Masonry item overflows into the next column

Asked Feb 27 '19 at 10:47

Active Feb 27 '19 at 12:04

Viewed 145 times

Here is my 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 has no height specified whatsoever, but what happens is after some random height the last item overflows into the next column resulting in items to appear broken in the grid.

My 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

edited Feb 27 '19 at 12:04

Paulie_D

107,962
13
142
161

asked Feb 27 '19 at 10:47

Amir Rami

This is not HTML, it's PHP (probably from WordPress), Please give the generated HTML code. – yunzen Feb 27 '19 at 10:50
@yunzen There... – Amir Rami Feb 27 '19 at 10:58
I don't see any issue here. Your screenshot doesn't show anything wrong. You need to provide for a [mcve] – yunzen Feb 27 '19 at 11:06
@yunzen My screenshot doesn't show anything wrong? Look again... – Amir Rami Feb 27 '19 at 11:11
You have to hint us. What is apparent to you must not be recognised by others – yunzen Feb 27 '19 at 11:14
@yunzen I said in the title it overflows into another column. – Amir Rami Feb 27 '19 at 11:43
Not in this screenshot https://i.stack.imgur.com/8pgk2.png – yunzen Feb 27 '19 at 11:44
Also this is not CSS-Grid.... – Paulie_D Feb 27 '19 at 12:05

Masonry item overflows into the next column

0 Answers0