I am building a laravel project that uses masonry layout (the same layout as pinterest) and is currently achieving this result:
HTML:
<div class="masonry-container products-by-room" style="margin-top: 8rem">
@foreach ($rooms as $room)
<div class="masonry-item" data-category="{{ $room->data_category}}">
<a href="#zoomImg{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#zoomImg{{ $room->id }}">
<div class="img-wrapper">
<img src="{{ $room->img }}" alt="" class="img-fluid shade">
<div class="overlay">
<i class="fa fa-search-plus icon"></i>
</div>
</div>
</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
CSS:
.masonry-container {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-gap: 15px;
-moz-column-gap: 15px;
column-gap: 15px;
}
.masonry-item {
display: inline-block;
width: 100%;
}
.masonry-item img {
display:block;
width: 100%;
}
As you can see from the html code, the images are inserted dinamycally from the database and the layout displays them in a vertical order, like so:
What I want to achieve is for the layout to follow an horizontal order like so:
All the solutions I´ve seen for the layout I want required fixed heights for the images or the columns, and since the images are being placed dinamically from the database and all have different heights, this kind of approach doesn´t work for me. Could anyone help me, please?
