How To Calculate Each Child Div Height And Width

$(window).load(function() {
  $('.grid').children().each(function(item) {
    var divHeight = 0;
    var divWidth = 0;
    divHeight = $('.grid-item').height();
    divWidth = $('.grid-item').width();
    console.log(divWidth);
    console.log(divHeight);
    //check if child div's width is greater then height then add some class
    if ($(this).width() > $(this).height()) {
      if ($(this).hasClass('class1')) {
        $(this).removeClass('class1');
      } else {
        $(this).addClass('class1');
      }
    }
  });
});

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}


/* ---- grid ---- */

h1 {
  text-align: center
}

.grid {
  background: #DDD;
  max-width: 1200px;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Isotope - masonry layout mode</h1>
<div class="grid">
  <div class="grid-item">
    <img src="https://via.placeholder.com/300/09f/fff.png" alt="">
  </div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/728x90.png" alt="">
  </div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/500x100.png" alt="">
  </div>
</div>

$('.grid-item').each(function() {
    let $this = $(this);
    let divHeight = parseFloat($this.outerHeight());
    let divWidth = parseFloat($this.outerWidth());
    let className = "";
    //check if child div's width is greater then height then add some class
    className = divWidth > divHeight ? 'class1' : 'class2';
    if (divWidth === divHeight)
        className = 'class3';
    $this.removeClass('class1').removeClass('class2').removeClass('class3').addClass(className);
});

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}


/* ---- grid ---- */

h1 {
  text-align: center
}

.grid {
  background: #DDD;
  max-width: 1200px;
  margin: 0 auto;
}
.class1 { background-color: red; }
.class2 { background-color: blue; }
.class3 { background-color: yellow; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Isotope - masonry layout mode</h1>
<div class="grid" >
  <div class="grid-item" style="height:200px;width:200px;" >
    <img src="https://via.placeholder.com/300/09f/fff.png" alt="">
  </div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/728x90.png" alt="">
  </div>
  <div class="grid-item" style="height:203px;width:201px;">
    <img src="https://via.placeholder.com/100x500.png" alt="">
  </div>
</div>