Bootstrap three columns with dynamicaly inserted image

Question

This is what I want to achieve:

But this is the result I get:

The img and text are inserted from the DB. This is the code:

<div class="row" style="margin-top: 8rem;">
   @foreach ($rooms as $room)
       <div class="col-4" data-category="{{ $room->data_category}}">
            <a href="#zoomImg{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#zoomImg{{ $room->id }}">
                <img src="{{ $room->img }}" alt="" class="img-fluid">                        
            </a>
            <div class="text-left mt-3 mb-5">
                <p class="product-subtitle">{{ $room->name }}</p>
                <h4 class="product-title">Shop the Look</h4>
                <a class="product-price-link" href="#getPriceByRoom{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#getPriceByRoom{{ $room->id }}">get price</a>
           </div>
      </div>
  @endforeach
</div>

I tried positioning the @foreach in a different way and still could't get the result I wanted. Any suggestions?

Answer 1

Found a solution to the layout on this article

.masonry-container {
 column-count: 3;
 column-gap: 15px;
}
.masonry-item {
 display: inline-block;
 width: 100%;
}
.masonry-item img {
 display:block;
 width: 100%;
}