CSS Grid Compatibility
TODO:
- Research currently state of compatibility
- Make any necessary changes
- Update docs, demos and tutorials
New to all of this so please remove this comment if it’s not constructive ;)
My first time using mixitup I directly went on using it with css grid and have not encountered any issues at all other than maybe having to implement some sort of fallback for the grid itself which is not a mixitup issue anyway.
Thanks @MartinConde that's great to know - I still haven't got around to looking into this but sounds like it might be a non-issue in that case.
I tried to implement MixItUp with Grid, I noticed a bug while sorting, it seems some items get the entrance animation twice, they get sorted in their place and then reappearing(resorting), this only happens when the result is 1 item and not on all of them,
I switched the grid to flex and seem to sort the problem.
Thanks for the info @AKrocks (still haven't had time to look into this :( )
So I think I have css grids working for the most part.
I had to turn off height clamping because the grid items would expand if we filtered out enough items to remove rows.
I also had to explicitly turn off animations for IE11. but IE and css grids is kind of bonkers anyways due to the lack of auto placement. I'm doing the autoplacement manually in js for IE11 (have to support custom dynamic rowspan,colspan).
So basically I had to opt out of any animation calcs for IE11. I'm sure it can be done, but I'd need to hook in and run my the js autoplacement logic before the final placement calcs were run i.e. setFinal
Other than that. it seems to work like I'd expect.
@patrickkunka from my testing it seems to work well natively with CSS Grid, but seems to stumble on animations - as per https://github.com/patrickkunka/mixitup/issues/569