Верстка квадратных блоков в boottrap

Через display: grid (спасибо @diraria за наводку на такую чудесную технологию) это оказалось сделать достаточно просто:

<section id="albums">
    <div class="container">
        <h1>Альбомы выпущенные на студии</h1>
        <p>На студии с 2000 года было выпущено более 123 альбомов blah-blah-blah...
        <div class="placeholder_albums">
            @foreach($albums as $album)
            <div>
               <img src="{{ $album->image }}" width="250px" height="250px" alt="{{ $album->title }}">
            </div>
            @endforeach
        </div>
    </div>
</section>

И в css:

#albums .placeholder_albums {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-rows: repeat(2, 250px);
}
#albums .placeholder_albums img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Этот пример был в статье, осталось чуть допилить, чтобы размер по вертикали совпадал с горизонталью:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-rows: repeat(2, minmax(250px, 1fr));