Нужен совет по верстке на Bootstrap 4?

Question

[Сергей Коноваленко]

Здравствуйте. Появился вот такой нюанс. Мне нужно сверстать секцию, в которой блоки расположены как-бы кирпичиками, из-за того, что высота изображения в каждом будет разная.



Я для всех блоков открыл одну строку row, потом каждый блок поместил в col-lg-4

<div class="row">
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
</div>

Но тогда получается вот так, как на картинке ниже, из-за того, что row имеет display: flex; и каждый col-lg-4 получается одинаковой высоты. А мне нужно как-то сделать чтобы колонки, которые снизу подсосались к верху, чтобы не было пустого пространства, и было все кирпичиками. Падскажите, пожалуйста, как правильно такое можно сделать?

Answer 1

[Сергей Герасимов]

В данном случае вы используете сетку, она и не должна себя вести так, как вам нужно.
Для вашей затеи есть карточки getbootstrap.com/docs/4.0/components/card/#card-columns

Answer 2

[Максим Тимофеев]

Если Вы используете какую-то технологию, это не значит, что другие нельзя использовать с ней. То что Вы хотите это явно:
https://masonry.desandro.com/
при чем c bootstrap она отлично ладит (с 4-м не юзал, но думаю что проблем быть не должно)

Comments

[Сергей Герасимов]

Максим Тимофеев, в данном случае в этом нет необходимости. В bootstrap 4 имеется встроенная поддержка masonry

[Максим Тимофеев]

Сергей Герасимов, нет в bootstrap нет masonry, там есть Card columns и хоть они и похожи внешне на результат работы masonry - это совсем другая петрушка

[webhead]

Использую salvattore.js, работает прекрасно как с BS3, так и с BS4.