Сделать masonry из row в Bootstrap 4

Question

Всем привет! Возможно как-то сделать masonry из row в Bootstrap 4? Cards не подходят, так как блоки встают не на свои места. В идеале как нибудь реализовать это на такой верстке, неважно css/js/jquery:

img {
  width: 100%;
  height: auto;
}

.col-12 {
  padding-bottom: 30px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="row">
      <div class="col-12 col-sm-4">
        <img src="https://via.placeholder.com/364x364" alt="">
      </div>
      <div class="col-12 col-sm-4">
        <img src="https://via.placeholder.com/364x590" alt="">
      </div>
      <div class="col-12 col-sm-4">
        <img src="https://via.placeholder.com/364x364" alt="">
      </div>
      <div class="col-12 col-sm-4">
        <img src="https://via.placeholder.com/364x590" alt="">
      </div>
      <div class="col-12 col-sm-4">
        <img src="https://via.placeholder.com/364x364" alt="">
      </div>
      <div class="col-12 col-sm-4">
        <img src="https://via.placeholder.com/364x590" alt="">
      </div>
    </div>

Answer 1

Можно вот так:

img {
  max-width: 100%;
  display: block;
  margin-bottom: 10px;
  break-inside: avoid;
}

<div class="container">
  <img src="https://assets.codepen.io/12005/windmill.jpg" alt="" />
  <img src="https://assets.codepen.io/12005/suspension-bridge.jpg" alt="" />
  <img src="https://assets.codepen.io/12005/sunset.jpg" alt="" />
  <img src="https://assets.codepen.io/12005/snowy.jpg" alt="" />
  <img src="https://assets.codepen.io/12005/bristol-balloons1.jpg" alt="" />
  <img src="https://assets.codepen.io/12005/dog-balloon.jpg" alt="" />
  <img src="https://assets.codepen.io/12005/abq-balloons.jpg" alt="" />
  <img src="https://assets.codepen.io/12005/disney-balloon.jpg" alt="" />
  <img src="https://assets.codepen.io/12005/bristol-harbor.jpg" alt="" />
  <img src="https://assets.codepen.io/12005/bristol-balloons2.jpg" alt="" />
  <img src="https://assets.codepen.io/12005/toronto.jpg" alt="" />
</div>

Answer 2

В данный момент реализация masonry-раскладки на CSS невозможна, но работа в этом направлении ведется. Недавно был опубликован черновик спецификации CSS Grid 3 уровня, в котором содержится описание способа создания Masonry-раскладки с помощью чистого CSS.

Используйте Masonry.js или можете попробовать сделать на экспериментальных свойствах. Подробнее можно почитать здесь: Нативный Masonry Layout в CSS Grid Level 3

БЛОГ НА HUSL

Сделать masonry из row в Bootstrap 4

Ответы (2 шт):