Isotope changing grid-item sizes

I have added isotope to the website and it seems to sort items fine. However it has resized all of the shop items and the shop page now looks terrible! Any tips how to make the grid items all the correct size again? I have tried setting custom css on .grid-item but it did not make the image scale back to the correct size. I have also tried some isotop settings but to no avail.

I have removed isotope for now.

This is what it looks like with isotope:

This is the code I added to the shop page to initialise isotope (the actual sorting script is left out for simplicity:

//Isotope integration into Es site.Try 2
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script>
    var elem;
    var iso;
    window.onload = function(){
        elem = document.querySelector('.list-grid');
        iso = new Isotope( elem, {
        //options
        percentPosition: true,
        itemSelector: '.grid-item',
        layoutMode: 'fitRows',
        containerStyle: null,
        resize: false,
        fitRows: {
            equalheight: true,
            gutter: 30
        },
        getSortData: {
          name: '.grid-title',
          price: '.product-price'
        }
    });
  }

</script>