me encantaría evitar este error de Auto escalamiento con CSS que deja unos enormes espacios en blanco por los nombres largos de las películas. Alguien me ayudaría a como resolverlo? Aquí les dejo mi código del DIV y el CSS
HTML
<div class="col-md-2 w3l-movie-gride-agile">
<a href="single.html" class="hvr-shutter-out-horizontal"><img src="imagen/malefica.jpg" class="img-responsive" />
<div class="w3l-action-icon"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
</a>
<div class="mid-1 agileits_w3layouts_mid_1_home">
<div class="w3l-movie-text">
<h6><a href="single.html">Maléfica: La dueña de Mal</a></h6>
</div>
<div class="mid-2 agile_mid_2_home">
<p>2019</p>
<div class="block-stars">
<ul class="w3l-ratings">
<li><a href="#"><i class="fa fa-star" aria-hidden="true"></i>7.4</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="ribben">
<p>NEW</p>
</div>
</div>
CSS
.w3l-movie-gride-agile {
text-align: center;
box-shadow: 0px 0px 10px rgb(255 255 255 / 35%);
margin-right: 0%;
margin-bottom: 3%;
position: relative;
padding-left: 0;
}
.col-md-2 {
width: 16.66666667%;
}
float
para posicionar los elementos; te sugiero cambiar a flex