Smooth Grid Item Transitions on Hover

Question

I have this table which is by default 3 columns 2 rows (3x2). When the on :hover happens it becomes 2 columns 3 rows (2x3)

default---(3x2):

| Pig | Pidgeon | Turtle |

| Fish | Cat | Dog |

on hover (2x3):

| Pig | Pidgeon |

| Turtle | Fish |

| Cat | Dog |

What I want to achieve:

So when the on hover happens. I want the cell to move (animation) to its destination, with a sort-of fly move to it's cel and go back the same way when I remove my cursor from there.

For example, I want to see turtle (col 3 cel 1) to move to (col 1 cel 2). But right now it's just statically becomes 3x2 or 2x3 or with my other attempts it moves outside the table. I just want A smooth transition or ease in/out of the grid positions.

.main {
    width: 80%;
    display: flex;
    align-items: center;
    align-content: center;
}

.root {
    display: grid;
    border: solid 1px black;
    grid-template-columns: repeat(3, 1fr);

}

.root:hover {
    display: grid;
    border: solid 1px black;
    grid-template-columns: repeat(2, 1fr);
}

.col {
    column-span: 1;
    border: solid 1px black;
    background-color: red;
    transition: all 300ms ease;
}


.root:hover .col:nth-child(1) {
    transform: translate(50%, 0);
}

.root:hover .col:nth-child(2) {
    transform: translate(100%, 0); 
}

.root:hover .col:nth-child(3) {
    transform: translate(0, 100%);
}

.root:hover .col:nth-child(4) {
    transform: translate(50%, 100%); 
}

.root:hover .col:nth-child(5) {
    transform: translate(100%, 100%); 
}

.root:hover .col:nth-child(6) {
    transform: translate(0, 200%);
}

 <div class="main">
        <div class="root">

            <div class="col">
                <label>
                   pig
                </label>
            </div>

            <div class="col">
                <label>
                  pidgeon
                </label>
            </div>

            <div class="col">
                <label>
                    turtle
                </label>
            </div>

            <div class="col">
                <label>
                    fish
                </label>
            </div>

            <div class="col">
                <label>
                    cat
                </label>
            </div>

            <div class="col">
                <label>
                    dog
                </label>
            </div>
        </div>
    </div>