Masonry isotope Layout

Question

I have a problem with this layout type.

the small divs don't cover the white space.

for example: the fourth and the fifth div goes under the first div and they don't go under the second and third div

I want that this divs follow this layout (on the bottom you can view the code):

.masonryrow.rowfullwidth {
    display: flex;
    flex-flow: wrap;
}

.schedaProdotto {
    flex: 0 0 24%;
    height: fit-content;
    margin-right: 5px;
}

.schedaProdotto.big {
    flex: 0 0 49%;
}

.schedaProdotto.bigger {
    flex: 0 0 48% !important;
}

.schedaProdotto.xbigger {
    flex: 0 0 72%;
}

.imageProduct{
  background: red !important;
}

.imageProduct.image-Mid {
    padding-top: 60.9%;
}

.image-SM {
    padding-top: 52%;
}

<div class="container noPadding marginContBottom">
                <div class="masonryrow rowfullwidth" style="position: relative;">
                    <div class="schedaProdotto big">
                        <a href="#">
                            <div class="imageProduct image-Mid" style="background: url(/images/Shop/FotodeafultMasonry/VASOBUSTO.33.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/tartarugauntitled.16.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/rosastelountitled.5.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/cuboovaleuntitled.14.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/bracciale4.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-Mid" style="background: url(/images/Shop/FotodeafultMasonry/VASOBUSTO.33.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/tartarugauntitled.16.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto big">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/rosastelountitled.5.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/cuboovaleuntitled.14.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/bracciale4.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto bigger">
                        <a href="#">
                            <div class="imageProduct image-Mid" style="background: url(/images/Shop/FotodeafultMasonry/VASOBUSTO.33.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto bigger">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/tartarugauntitled.16.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/rosastelountitled.5.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/cuboovaleuntitled.14.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/bracciale4.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-Mid" style="background: url(/images/Shop/FotodeafultMasonry/VASOBUSTO.33.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto xbigger">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/tartarugauntitled.16.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/rosastelountitled.5.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/cuboovaleuntitled.14.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/bracciale4.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-Mid" style="background: url(/images/Shop/FotodeafultMasonry/VASOBUSTO.33.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/tartarugauntitled.16.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/rosastelountitled.5.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/cuboovaleuntitled.14.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                    <div class="schedaProdotto big">
                        <a href="#">
                            <div class="imageProduct image-SM" style="background: url(/images/Shop/FotodeafultMasonry/bracciale4.jpg);">
                            </div>
                        </a>
                        <div class="testuale">
                            <h3 class="gintoBlack nomeArticolo">Yellow Chair</h3>
                        </div>
                    </div>
                </div>
            </div>

How can I solve this problem?

This is not a specific question but rather a request to do your work. What problem did you run into, what exactly do you need to know to solve your problem? — Max, May 28 '20 at 16:21

Masonry isotope Layout

0 Answers0