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

258
26 декабря 2017, 15:09

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

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

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

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

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

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

Answer 1

Через 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));
READ ALSO
Написание блога [требует правки]

Написание блога [требует правки]

Здравствуйте, недавно начал писать сайт, пока только на htmlПодскажите пожалуйста, какой код или теги нужны, чтобы можно было выкладывать контент,...

232
Можно ли вставить SVG в письма?

Можно ли вставить SVG в письма?

Обычные jpg проходят на ура, но все что в svg не отображаетсяТестируемый почтовик gmail

299
Разное отображение элементов Crome FireFox? [требует правки]

Разное отображение элементов Crome FireFox? [требует правки]

Приветствую! Подскажите знающиеЕсть фильтр на странице http://cosmeticprofi

240
Создание сложного меню с анимацией slide с помощью Jquery

Создание сложного меню с анимацией slide с помощью Jquery

Есть сложное меню с двумя подкатегориямиОднако анимация срабатывает некорректно при клике на вторую подкатегорию (заново начинается анимация...

235