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

#html #css #вёрстка #bootstrap #адаптивная_верстка

Представьте страницу, на которой размещён какой-то текст, а справа завёрстаны квадратные
обложки альбомов. Пример, который нашёл в сети:



Обложки альбомов -- штука стандартная, на яндекс:музыке например все обложки -- это
картинки 500х500 пикселей.

И вот у меня есть допустим, 9 картинок 500х500, есть сетка бутстрап.

Как верстать такое? Хочу понять сам принцип, как это делается.

Ведь если менять размер браузера - то видно, что каждый раз в ряду разное число картинок,
от трёх до пяти, то есть как-то хитро подстраивается размер изображения по горизонтали
и вертикали, причём он по-видимому не подстраивается никак под сетку бутстрап.

Код тоже приветствуется, но больше интересует объяснение фокуса самого принципа работы.
    

Ответы

Ответ 1

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


    

        
Альбомы выпущенные на студии
        
На студии с 2000 года было выпущено более 123 альбомов blah-blah-blah...
        

            @foreach($albums as $album)
            

               
            
            @endforeach
        
    



И в 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));