I'm not incredibly familiar with the inner-workings of jQuery UI, but after stepping through the code a bit, here's what I'm gathering:
The containment plugin gets the request to expand the div outside the
containment (without taking
grid into account) and says "here, let me adjust that and expand you right up to the EDGE of the containment."
Then the grid plugin runs, sees the request to expand up to the edge of the
containment (but doesn't really take the
containment into account) and rounds that expansion request off based on the
grid, which could cause it to fall outside the
containment area if a larger part of the
grid would be inside the containment (due to the rounding).
So it seems to me the best way to fix this might be to:
Change to order of operations so the grid plugin runs first (not sure if this is feasible or possible) so the containment plugin is getting the full resize request with the
grid rounding taken into account.
Then make the containment plugin aware of the
grid and constrain the resize rounded off to the
grid if it would cause the element to go outside its
If changing the order is too difficult or not possible (I'm not sure how that goes with jQuery plugins), then we'd need to make the containment plugin do the grid rounding before it gets to the grid plugin I guess (which would then make the grid plugin do nothing when containment has already been run).