Bootstrap + masonry

В данном уроке мы разберемся в том как в bootstrap создать masonry сетку.

Если вы в первый раз слышите о ней, она позволяет подставлять колонки друг под друга, в случае если у них разная высота.

Подключаем masonry к bootstrap лучше в секции head:

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

Далее создаем файл style.css со следующим содержимым:

@media screen and (max-width: 767px) {
.masonry[data-columns]::before {
content: '2 .col-xs-6';
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.masonry[data-columns]::before {
content: '3 .col-xs-4';
}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
.masonry[data-columns]::before {
content: '4 .col-xs-3';
}
}
@media screen and (min-width: 1200px) {
.masonry[data-columns]::before {
content: '4 .col-xs-3';
}
}

И подключаем его в секции head (html):

<link rel="stylesheet" href="путь-до-файла/style.css">

Давайте в кратции разберем одно из css правил, к примеру вот это:

@media screen and (min-width: 1200px) {
.masonry[data-columns]::before {
content: '4 .col-xs-3';
}
}

Здесь masonry на разрешении экрана 1200 и более пикселей, будет строить ряды из 4 col-xs-3 колонок.

@media screen and (min-width: 768px) and (max-width: 991px) {
.masonry[data-columns]::before {
content: '3 .col-xs-4';
}
}

Здесь masonry на разрешении экрана от 768 до 991  пикселей, будет строить ряды из трех col-xs-4 колонок.

Ну и остается подключить masonry в html. Делается это очень просто, для этого необходимо для контейнера, добавить класс masonry и после него data-columns

<div class="row masonry" data-columns>

Ну вот в принципе и все.