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