Side menu causes layout to rerender/rearrange


I’m using angular 2 masonry grid plugin to achieve a pinterest-style layout.

This works fine but I have a problem when I open the side menu - It seems the grid is trying to re-arrange itself.

This is the layout when the menu is closed:

This is the layout when the menu is opened:

Notice it has replaced the first image and the seconed image is cropped and overlaying another image.
I use type="push" on my menu

I’ve been battling with this for a few days and I’m pretty much out of idea’s and stuff to try.

I don’t mind using a different grid or plugin, or to use a different animation for my menu - I just want to achieve a pinterest-style grid that plays nicely with my menu …

Please advice - I’d appriciate any kind of help that will point me in the right direction