Masonry JavaScript layout Disable and Reactivate problem with if

Question

Can someone help me plz, I want to use masonry JavaScript when the screen is bigger than 800px and destroy/ disable it when screen is less than 800px.

the problem is if the site loaded on big screen more than 800px then I shrink the view port to smaller than 800px the Masonry JavaScript doesn't disable

// Masonry Options and ImagesLoaded
var grid = document.querySelector('.grid');
var masonryOptions = {
  itemSelector: '.grid-item',
  columnWidth: '.gallery__grid__item__anchor__img',
  gutter: 16,
  horizontalOrder: true,
  fitWidth: true,
  transitionDuration: 0,
};
var msnry = new Masonry( grid, masonryOptions );
imagesLoaded( grid ).on( 'progress', function() {
msnry.layout();
});


// My If Statement
function myFunction(x) {
  if (x.matches) {
    msnry.destroy();
  } else{
    msnry = new Masonry( grid, masonryOptions );
  }
}
var x = window.matchMedia("(max-width: 800px)")
myFunction(x)
x.addListener(myFunction)