title: CSS/JS: Strange animation/layout behavior w/ MixItUp.js
body: <p>I'm using a basic inline-block based layout with <a href="https://mixitup.kunkalabs.com/" rel="nofollow noreferrer">MixItUp.js</a> to provide filtering functionality, along with <code>column-count</code>, and media queries for a fluid/responsive grid. I have set up a jsfiddle <a href="http://jsfiddle.net/nickpish/0ozq5f9r/" rel="nofollow noreferrer">here</a>. </p>
  
  <p><a href="https://i.stack.imgur.com/A9eHZ.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A9eHZ.gif" alt="enter image description here"></a></p>
  
  <p>My issue is that the grid items seem to bounce around a bit before settling into place when first loaded and after being resorted/filtered. (I've tried to capture this behavior in the above animated gif.) I'm not sure if this is due to the responsive images adapting to the width/height of the grid item and disrupting the animation, or if it's just an issue with my CSS; but I've noticed that if the window size is reduced to a single column (mobile) layout the issue doesn't seem to occur at all, in fact it's quite smooth-- only problematic with two or three columns. I'm seeing this in all browsers I've tested (Chrome, Firefox, Edge.)</p>
  
  <p>I've tried modifying the animation settings in MixItUp.js, but haven't had any luck. I'm suspecting the erratic animation is deriving from the <code>inline-block</code> based layout, but I'm not sure why. Any assistance here is most appreciated.</p>
  
  <p>Edit: I'm seeing the animated GIF isn't running, oh well...</p>