This is my unique gallery display: https://i.stack.imgur.com/RddD8.png
Here is the look I am going for https://i.stack.imgur.com/kuOye.png
I want to showcase images in a slightly messy yet awesome way
However, I encounter an issue when some images have varying heights https://i.stack.imgur.com/CpoMs.png
There is whitespace left and it does not automatically fill that section. This whitespace needs to be filled.
This is my HTML & CSS Code :
.detail-img{
width: 23%;
margin: 10px;
position: relative;
min-height: 280px;
max-height: 450px;
}
.galeri-row{
margin: auto;
}
.galeri-row img{
border-radius: 15px;
object-fit: cover;
object-position: center;
cursor: pointer;
width: 100%;
height: 100%;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<section>
<div class="container">
<div class="row galeri-row justify-content-md-center">
<a href="#" class="detail-img">
<img src="img/src">
<div class="detail-text">
<span class="my-tag btn-success">TAG</span>
<p>
Lorem ipsum dolor sit amet consectetur...
</p>
</div>
</a>
<a href="#" class="detail-img galeri-sm">
<img src="img/src">
<div class="detail-text">
<span class="my-tag btn-success">TAG</span>
<p>
Lorem ipsum dolor sit amet...
</p>
</div>
</a>
<a href="#" class="detail-img galeri-sm">
<img src="img/src">
<div class="detail-text">
<span class="my-tag btn-success">TAG</span>
<p>
Lorem ipsum dolor sit amet...
</p>
</div>
</a>
<a href="#" class="detail-img">
<img src="img/src">
<div class="detail-text">
<span class="my-tag btn-success">TAG</span>
<p>
Lorem ipsum dolor sit amet...
</p>
</div>
</a>
...................
</div>
</div>
</section>