Как правильно построить сетку с картинками, чтобы они заполняли пустоту?

Question

[Александр Андропов]

Добрый день. У меня на странице 12 изображений, они имеют разную ориентацию, когда я их вывожу в случайном порядке, то в ряд с горизонтальными изображениями могут вставить вертикальные, и образуется пустота (как на скриншоте).

Сейчас это просто контейнер с row и там перечислены изображения.
Подскажите пожалуйста пример для Bootstrap, где этих пустот не будет. Спасибо.

Answer 1

[apoca1ipsis]

Как вариант
https://codepen.io/apoca1ipsis/pen/ababaJE

<div class="images">
        <img src="https://via.placeholder.com/468x160" alt="">
        <img src="https://via.placeholder.com/468x260" alt="">
        <img src="https://via.placeholder.com/468x60" alt="">
        <img src="https://via.placeholder.com/468x160" alt="">
        <img src="https://via.placeholder.com/468x360" alt="">
        <img src="https://via.placeholder.com/468x560" alt="">
        <img src="https://via.placeholder.com/468x460" alt="">
        <img src="https://via.placeholder.com/468x60" alt="">
        <img src="https://via.placeholder.com/468x460" alt="">
        <img src="https://via.placeholder.com/468x260" alt="">
</div>

    <style>
        .images {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 20px;
        }
        .images img {
            display: block;
            width: 100%;
            min-height: 100%;
            object-fit: cover;
            object-position: center;
        }
    </style>

Comments

[Одиночка Айс]

и?

Answer 2

[Одиночка Айс]

Если немного доделать ответ от apoca1ipsis, то получится что-то такое: https://codepen.io/daemonhk/pen/xxaxmBa
Однако стоит учесть, что элементы располагаются, условно говоря, как им вздумается, дабы заполнить все пространство.