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

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>
jquery


Solution 1:[1]

Here's one way - use a counter and when it hits 3, loop back and set the height

let maxHeight = 0,
  tmp = [];
let els = $(".grid-item .inner .content");
els.each(function(i) {
  i = i + 1;
  maxHeight = Math.max($(this).outerHeight(), maxHeight);
  tmp.push($(this))
  if (i % 3 === 0 || i >= els.length) {
    // go back and apply
    // console.log('setting h:', maxHeight);
    tmp.forEach(div => div.height(maxHeight))
    maxHeight = 0;
    tmp = [];
  }

});
.content {
  border: 1px solid #ccc;
  width: 200px;
  float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='grid-item'>
  <div class='inner'>
    <div class='content'>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
      incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
      voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>

    <div class='content'>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
      incidunt ut labore et dolore magnam
    </div>

    <div class='content'>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
    </div>

    <div class='content'>
      Sed ut perspiciatis
    </div>

    <div class='content'>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    </div>

    <div class='content'>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
    </div>
    
    <div class='content'>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
      incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
      voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>

    <div class='content'>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
     
    </div>
  </div>
</div>

Solution 2:[2]

While this is possible with jQuery (and JavaScript, of course) I would advise using CSS and actually using grid layout:

/* basic simple reset: */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font: normal 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

.feedWrapper {
  /* here we use display: grid: */
  display: grid;
  /* a gap between adjacent rows/columns: */
  gap: 0.5em;
  /* here we define 3 columns, each taking
     an equal amount of space (so 3 columns,
     each taking 33% of the total space), but
     setting a minimum size of 10px (adjust to
     suit your preference): */
  grid-template-columns: repeat(3, minmax(10px, 1fr));
}

.inner {
  /* again, using CSS Grid layout: */
  display: grid;
  /* taking the full height of the parent: */ 
  height: 100%;
}

.content {
  border: 1px solid red;
}
<div class="feedWrapper">

  <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>


</div>

JS Fiddle demo.

There is, of course, the option to use flex layout:

/* basic simple reset: */
*,
::before,
::after {
  box-sizing: border-box;
  font: normal 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

.feedWrapper {
  /* using flex layout: */
  display: flex;
  /* allowing the content to wrap to new
     lines as necessary: */
  flex-wrap: wrap;
  /* setting a gap between adjacent elements: */
  gap: 0.75em;
  justify-content: space-between;
}

.grid-item {
  /* not 33%, in order to allow some space to
     appear between adjacent columns: */
  flex-basis: 32%;
  /* spreading any leftover space between the
     elements on the same 'row': */
  justify-content: space-between;
}

.inner {
  /* using flex layout: */
  display: flex;
  /* taking all available space vertically: */
  height: 100%;
}

.content {
  border: 1px solid red;
  /* allowing the element to grow to occupy the
     full horizontal space*/
  flex-grow: 1;
}
<div class="feedWrapper">

  <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>


</div>

JS Fiddle demo.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions