Isotope equal height rows

Question

How can I make the Isotope rows have equal heights? The next column starts at the correct height but the background does not fill the entire block.

I tried several things with min-height and height like auto, inherit, 100%, 100vh, ...

This is my project now, with a 2x2 grid block layout: It features 4 blocks with 50vh and 50vh... The block growns when the content is bigger then the block (50vh), the second block should grow with it.

$('.grid').isotope({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  percentPosition: true,
  layoutMode: 'fitRows',
  masonry: {
    // use element for option
    columnWidth: '.grid-sizer'
  }
});

/*
var maxHeight = 0;

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

$(".grid-item").height(maxHeight);
*/

.grid-item {
  background: #0ba;
}

.grid-item:nth-child(2n+2) {
  background: #555;
}

.grid-item:nth-child(3n+3) {
  background: #e64;
}

.grid-item:nth-child(4n+4) {
  background: #00f;
}

.grid-item:nth-child(3n+5) {
  background: #9f5;
}

.grid {
  width: 100vw;
}

.grid-sizer,
.grid-item {
  width: 50vw;
}
.grid-item {
  min-height: 100vh;
}

@media only screen and (min-width: 1280px) {
  .grid-sizer,
  .grid-item {
    width: 50vw;
  }
  .grid-item {
    min-height: 50vh;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/isotope.pkgd.min.js"></script>
<h1>Layout</h1>
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item" style="font-size:40px;">Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</div>
  <div class="grid-item">gdfgdf</div>
  <div class="grid-item">gfdg</div>
  <div class="grid-item">gfg</div>
</div>

Thanks in advance

Kind regards

Answer 1

I edited my last answer. See if adding the following lines solve your problem.

.grid-item {
  bottom: 0;
}

$('.grid').isotope({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  percentPosition: true,
  layoutMode: 'fitRows',
  masonry: {
    // use element for option
    columnWidth: '.grid-sizer'
  }
});

/*
var maxHeight = 0;

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

$(".grid-item").height(maxHeight);
*/

.grid-item {
  background: #0ba;
}

.grid-item:nth-child(2n+2) {
  background: #555;
}

.grid-item:nth-child(3n+3) {
  background: #e64;
}

.grid-item:nth-child(4n+4) {
  background: #00f;
}

.grid-item:nth-child(3n+5) {
  background: #9f5;
}

.grid {
  width: 100vw;
}

.grid-sizer,
.grid-item {
  width: 50vw;
}
.grid-item {
  min-height: 100vh;
}

.grid-item {
  bottom: 0;
}

@media only screen and (min-width: 1280px) {
  .grid-sizer,
  .grid-item {
    width: 50vw;
  }
  .grid-item {
    min-height: 50vh;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/isotope.pkgd.min.js"></script>
<h1>Layout</h1>
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item" style="font-size:40px;">Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</div>
  <div class="grid-item">gdfgdf</div>
  <div class="grid-item">gfdg</div>
  <div class="grid-item">gfg</div>
</div>

Answer 2

I've found this commit : equal_height_fit-rows.js

1. fix the typo and add a ) on line 40
2. load it after isotope.pkgd.min.js
3. then add equalHeight:true as fitRows options :

var iso = new Isotope( listElem, {
          itemSelector: 'li',
          layoutMode: 'fitRows',
          fitRows: {
            equalheight: true
           }
        });