JSFiddle - React, Tailwind, and code Playground
HTML
<div class="flex_wrap">
<div class="flex_item">
<img src="https://photolium.net/uploads/posts/2017-03/1489180781_4-hosico-real-life-puss-in-boots.jpg" alt="">
</div>
<div class="flex_item">
<img src="http://murkote.com/wp-content/uploads/2016/12/kamyshoviy-kot-4.jpg.pagespeed.ce.FbBWOkp8Tg.jpg" alt="">
</div>
<div class="flex_item">
<img src="http://kot-pes.com/wp-content/uploads/2015/06/Abissinskii_kot_05-650x977.jpg" alt="">
</div>
<div class="flex_item">
<img src="http://kot-pes.com/wp-content/uploads/2015/06/Abissinskii_kot_05-650x977.jpg" alt="">
</div>
<div class="flex_item">
<img src="http://static1.repo.aif.ru/1/34/714704/f12a352fac8d4141f832434b7a8133e0.jpg" alt="">
</div>
<div class="flex_item">
<img src="https://www.segodnya.ua/img/gallery/10693/52/796829_main.jpg" alt="">
</div>
<div class="flex_item">
<img src="http://kot-pes.com/wp-content/uploads/2015/06/Abissinskii_kot_05-650x977.jpg" alt="">
</div>
<div class="flex_item">
<img src="http://static1.repo.aif.ru/1/34/714704/f12a352fac8d4141f832434b7a8133e0.jpg" alt="">
</div>
<div class="flex_item">
<img src="http://murkote.com/wp-content/uploads/2016/12/kamyshoviy-kot-4.jpg.pagespeed.ce.FbBWOkp8Tg.jpg" alt="">
</div>
<div class="flex_item">
<img src="http://kot-pes.com/wp-content/uploads/2015/06/Abissinskii_kot_05-650x977.jpg" alt="">
</div>
<div class="flex_item">
<img src="https://content.onliner.by/news/1100x5616/c7e920c94171ff2144c06e451a8cc982.jpeg" alt="">
</div>
<div class="flex_item">
<img src="http://kot-pes.com/wp-content/uploads/2015/06/Abissinskii_kot_05-650x977.jpg" alt="">
</div>
<div class="flex_item">
<img src="http://static1.repo.aif.ru/1/34/714704/f12a352fac8d4141f832434b7a8133e0.jpg" alt="">
</div>
<div class="flex_item">
<img src="http://kot-pes.com/wp-content/uploads/2015/06/Abissinskii_kot_05-650x977.jpg" alt="">
</div>
<div class="flex_item">
<img...
CSS
.flex_wrap {
width: 100%;
padding: 15px;
display: flex;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
flex-wrap: wrap;
flex-direction: column;
}
.flex_item {
height: auto;
paddin-bottom: 3px;
width: 20%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-left: 3px;
margin-right: 3px;
}
.flex_item:empty {
width: 0;
}
.flex_item img {
width: 100%;
height: auto;
}
JavaScript
function wrapperHeight() {
var itemsHeight = 0;
$('.flex_item').each(function() {
itemsHeight = itemsHeight + $(this).height();
});
$('.flex_wrap').css('height', itemsHeight/5);
}
wrapperHeight();
$( window ).resize(function() {
wrapperHeight();
});