Masonry bootstrap 4 нетипичная верстка блоков

Question

Возможно ли реализовать такое расположение блоков используя чистый bootstrap 4? Пробовал по разному и через masonry, но везде блоки едут или встают не так как надо.

Пробовал реализовать вот так, но почему-то блоки распологаются не так как нужно, в чем может быть проблема?

         $('.grid').masonry({
             itemSelector: '.grid-item',
             columnWidth: 364,
             gutter: 5
         });

.best-work {
  .grid{
    &:after{
      content: '';
      display: block;
      clear: both;
    }
  }
  .grid-item{
    height: 364px;
    float: left;
    background-color: red;
    border:1px solid black;
    margin-bottom: 20px;
  }
  .grid-item--height2{
    height: 590px;
  }
}

    <section class="best-work">
        <div class="container">
            <div class="grid">

                <div class="grid-item">
                    <img src="https://via.placeholder.com/364x364" alt="" class="img-fluid">
                </div>

                <div class="grid-item grid-item--height2">
                    <img src="https://via.placeholder.com/364x590" alt="" class="img-fluid">
                </div>
                
                <div class="grid-item">
                    <img src="https://via.placeholder.com/364x364" alt="" class="img-fluid">
                </div>

                <div class="grid-item grid-item--height2">
                    <img src="https://via.placeholder.com/364x590" alt="" class="img-fluid">
                </div>

                <div class="grid-item">
                    <img src="https://via.placeholder.com/364x364" alt="" class="img-fluid">
                </div>

                <div class="grid-item grid-item--height2">
                    <img src="https://via.placeholder.com/364x590" alt="" class="img-fluid">
                </div>

            </div>
        </div>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"> </script>

Answer 1

Можно попробовать так(Если подразумевается, что при ширине меньше, чем у картинок, они не должны съезжать.)

    .grid {
        display: grid;
        grid-template: [start] "picture-1 picture-2 picture-3" 364px [row2]
        [row2] "picture-4 picture-2 picture-5"  226px [row3]
        [row3] "picture-4 picture-6 picture-5" 364px [row-end] / 1fr 1fr 1fr;
    }
    .picture-1 {
        grid-area: picture-1;
    }
    .picture-2 {
        grid-area: picture-2;
    }
    .picture-3 {
        grid-area: picture-3;
    }
    .picture-4 {
        padding-top: 2%;
        grid-area: picture-4;
    }
    .picture-5 {
        padding-top: 2%;
        grid-area: picture-5;
    }
    .picture-6 {
        padding-top: 2%;
        grid-area: picture-6;
    }

<section class="best-work">
    <div class="container">
        <div class="grid">

            <div class="picture-1">
                <img src="https://via.placeholder.com/364x364" alt="">
            </div>

            <div class="picture-2">
                <img src="https://via.placeholder.com/364x590" alt="">
            </div>

            <div class="picture-3">
                <img src="https://via.placeholder.com/364x364" alt="">
            </div>

            <div class="picture-4">
                <img src="https://via.placeholder.com/364x590" alt="">
            </div>

            <div class="picture-6">
                <img src="https://via.placeholder.com/364x364" alt="">
            </div>

            <div class="picture-5">
                <img src="https://via.placeholder.com/364x590" alt="">
            </div>

        </div>
    </div>
</section>

Если необходима адаптация по размерам:

    .grid {
        display: grid;
        grid-template: [start] "picture-1 picture-2 picture-3" 38.2% [row2]
        [row2] "picture-4 picture-2 picture-5"  23.6% [row3]
        [row3] "picture-4 picture-6 picture-5" 38.2% [row-end] / 1fr 1fr 1fr;
    }
    .picture-1 {
        grid-area: picture-1;
    }
    .picture-2 {
        grid-area: picture-2;
    }
    .picture-3 {
        grid-area: picture-3;
    }
    .picture-4 {
        padding-top: 2%;
        grid-area: picture-4;
    }
    .picture-5 {
        padding-top: 2%;
        grid-area: picture-5;
    }
    .picture-6 {
        padding-top: 2%;
        grid-area: picture-6;
    }
    img {
        width: 90%;
    }

<section class="best-work">
    <div class="container">
        <div class="grid">

            <div class="picture-1">
                <img src="https://via.placeholder.com/364x364" alt="">
            </div>

            <div class="picture-2">
                <img src="https://via.placeholder.com/364x590" alt="">
            </div>

            <div class="picture-3">
                <img src="https://via.placeholder.com/364x364" alt="">
            </div>

            <div class="picture-4">
                <img src="https://via.placeholder.com/364x590" alt="">
            </div>

            <div class="picture-6">
                <img src="https://via.placeholder.com/364x364" alt="">
            </div>

            <div class="picture-5">
                <img src="https://via.placeholder.com/364x590" alt="">
            </div>

        </div>
    </div>
</section>

БЛОГ НА HUSL

Masonry bootstrap 4 нетипичная верстка блоков

Ответы (1 шт):