Bootstrap grid image problem height elements - css

Question

I'm not very good in CSS, and so I don't know how to solve my problem. I've a grid images (you can see at https://i.imgur.com/88yDcbN.png). As you can see the first image (I selected) has useless white space below.
How can I move the image below so that there are 50px difference?
Actually I use these classes for my box:
col-sm-6 col-md-4
I'm using bootstrap as you can see.
The other divs inside the col-sm-6 col-md-4 have the right height.
Thank you for your help!
Example box:
<div class="_00d7">
<div class="row">
<div class="col-sm-6 col-md-4">
<div data-id="11" data-score="4380" class="_4180">
<a class="eac1">
<img src="images/E8wfc3V4Azc.jpg">
</a>
<div class="_96ae">
Punteggio immagine: <b>4380</b>.
</div>
</div>
</div>
</div>
</div>
CSS:
._00d7 ._4180 {
padding: 0;
margin-bottom: 30px;
background-color: #fff;
border-radius: 4px;
border: none;
transition: 0.15s ease-in-out;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.0975);
}
._00d7 .eac1 img {
border-radius: 4px 4px 0 0;
vertical-align: middle;
border-style: none;
margin-right: auto;
margin-left: auto;
display: block;
max-width: 100%;
height: auto;
}
(sorry for classes names, I'm using react)

Answer 1

For that particular layout (a Mansonry-like layout) Bootstrap4 give you a solution: use Card columns: https://getbootstrap.com/docs/4.0/components/card/#card-columns.
I give you an example. This is only a start point, you can customize as you want.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="_00d7">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card-columns">
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/500">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/250">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/300">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/100">
</a>
<div class="_96ae card-body">
<p class="card-text"> Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/300">
</a>
<div class="_96ae card-body">
<p class="card-text"> Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Be careful: the images order is vertical:
1 4 7
2 5 8
3 6 9