Smooth transition of objects in Grid Layout Group

I have constructed a UI shop element using a Grid Layout Group on a canvas. On the grid object I have a script with an array of button-prefabs which can instantiate into the grid. When I click a button, the button is destroyed and all of the buttons below are moved up one step.

It looks like this:


What I want to do is make the second and subsequent objects have a smooth transition when moving up the grid.

I could use a function to interpolate the entire grid object to move it up, but that would be a sloppy solution. (I would have to force the player to buy the first item)

I can’t change the position value of the child objects in the grid. Is this effect somehow possible with grid layout groups?

Hi again,

So I actually I got something that works really nicely. I based my stuff off this video tutorial series: Unity Tutorial - Drag & Drop Tutorial #1 [RPGs, Card Games, uGUI] - YouTube. Pretty much what the guy in the videos does is he creates invisible placeholders and puts those in place to where the cell was and he does some rearranging on the grid by modifing all the childrens sibling index. In my solution I do it somewhat similarly but I have added DOTweens so everything has a smooth transition.