Masonry

Masonry is a JavaScript grid layout library.

<script src="js/vendor/masonry.pkgd.min.js"></script>

var msnry = new Masonry('#masonryCardsExample', {
  itemSelector: '.col',
  percentPosition: true,
  transitionDuration: 0,
});

<div class="row row-cols-1 row-cols-sm-2 row-cols-xl-4 g-4" id="masonryCardsExample">
  <div class="col">
    <div class="card">
      <img src="img/product/small/product-4.webp" class="card-img-top sh-30" alt="image" />
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="img/product/small/product-3.webp" class="card-img-top sh-15" alt="image" />
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="img/product/small/product-2.webp" class="card-img-top sh-30" alt="image" />
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="img/product/small/product-1.webp" class="card-img-top sh-20" alt="image" />
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
        </p>
      </div>
    </div>
  </div>
</div>

You may find a usage example in Interface.Components.Card.html file which is initialized by js/components/cards.js.