Resizable grid items with dynamic content?

[ghost]

I'm in the process of trying to figure out how to use the Masonry plugin for dynamic content (through a CMS) with varying grid item sizes while also making the items of the Masonry grid resizable (on click).

To do so, I am trying to adopt the function for having animated, resizable grid items (which was provided here: https://codepen.io/desandro/pen/JFpIB) in the Masonry grid for content with different heights.

Unfortunately, I have trouble getting it to work. So far, I am only able to create a Masonry grid with changeable grid item sizes where the height of the grid items is set manually in the CSS.

How do I have to change my setup in order for the grid to work properly with vary sizes? As soon as I try to fill the grid items with images of different sizes, the resizing animations break/glitch and the grid items start to overlap.

You can see it happening in this CodePen: https://codepen.io/joSch/pen/gGGELq

[desandro]

Thanks for reporting this issue. Looks like the problem is how the height is being set. The animated item sizes demo works by explicitly setting expanded sizes in CSS. With your demo, since it uses images with varying height, we can't use the same technique. One solution would be to calculate the height in JS.