Displaying Gallery Page with CSS [duplicate] - html

Question

This question already has answers here:
CSS-only masonry layout
(4 answers)
Bootstrap 4 masonry layout utilizing flexbox grid
(3 answers)
Closed 2 years ago.
This my displayed gallery:
And this is what I want
I want to displayed image like that, a little messy but awesome
And this my trouble when some image have different height
there have whitespace and does not automatically fill the whitespace section So this whitespace should be fill.
This 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>

Answer 1

if you want to stick to fixed column layout I would use flexbox, with a flex-direction: column, to manage each column individually