How to get the tallest height of a div in every 3

February 10, 2022

I want to get the tallest height of a div in blocks of 3 – as I have a 3 column layout –

var maxHeight = 0;
$(".grid-item .inner .content").each(function() {
if ($(this).outerHeight() > maxHeight) {
  maxHeight = $(this).outerHeight();
}
}).height(maxHeight);

This gets the tallest height of ".grid-item .inner .content" – but I want to get the tallest height of the first 3 ".grid-item .inner .content" divs, then set those 3 to the tallest height, then get the tallest height of the next 3 – set it again, etc etc…

Any thoughts on how to achieve this?

so i was thinking of looking at divs 1-3 – setting a var for that tallest height – then applying that to divs 1-3, then looking at divs 4-6, again get the tallest height in a var, set that var to the height of divs 4-6 but I cant get my head around how…

.content {
border: 1px solid red;
}
.grid-item {
width: 33%;
display: inline-block;
vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>


    
   function logicCall() {
  
    var maxHeight = 0;
       $(".grid-item .inner .content").each(function() {
        if ($(this).outerHeight() > maxHeight) {
        maxHeight = $(this).outerHeight();
        }
       }).height(maxHeight);
    
   }
    
    logicCall();

</script>
   

<div class="grid-item">
<div class="inner">
<div class="content">
<p>Content goes here</p>
</div>
</div>
</div>

<div class="grid-item">
<div class="inner">
<div class="content">
<p>Content goes here, so this one is gonna be taller than the 1st and 3rd one...</p>
</div>
</div>
</div>

<div class="grid-item">
<div class="inner">
<div class="content">
<p>Content goes here for 3rd item</p>
</div>
</div>
</div>

<div class="grid-item">
<div class="inner">
<div class="content">
<p>4th Content goes here</p>
</div>
</div>
</div>

<div class="grid-item">
<div class="inner">
<div class="content">
<p>5th item is this one</p>
</div>
</div>
</div>

<div class="grid-item">
<div class="inner">
<div class="content">
<p>6th item</p>
</div>
</div>
</div>

<div class="grid-item">
<div class="inner">
<div class="content">
<p>7th Content goes here, 7th Content goes here, 7th Content goes here, 7th Content goes here,</p>
</div>
</div>
</div>

<div class="grid-item">
<div class="inner">
<div class="content">
<p>8th item is this one</p>
</div>
</div>
</div>

<div class="grid-item">
<div class="inner">
<div class="content">
<p>9th item</p>
</div>
</div>
</div>

>Solution :

Try this

let $gridItems = $(".grid-item .inner .content");
for(let i=0; i<$gridItems.length; i+=3){
    let $row = $gridItems.slice(i, i+3);
    let maxHeight = Math.max(...$row.map(function(){return $(this).height()}).get());
    $row.height(maxHeight);
}