How to transition grid-column property - css

Question

I want to transition the column when I change his position by grid-column property I try but it doesn't work.
Now I have 16 columns I choose one and write a word inside it "Catch me" then I will change the column's position from grid-column: 1; to grid-column: 3; the column will move from 1 to 3 but too fast so how to control that move by transition, I tried to use transition but it is not working with grid-column: 1;
`
.item.position-1-2 {
grid-row: 2;
grid-column: 1;
`
I made many classes for positions when I change the class the position will change in the grid but too fast
I change the class by javascript very well but it is moving too fast and this is bad.
/* The parent */
.container {
gap: 12px;
display: grid;
justify-items: center;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(4, 107px);
transition: 0.25s;
}
/* The child */
.item {
width: 107px;
height: 100px;
line-height: 100px;
transition: 0.25s;
}
/* The positions */
.tile.tile-position-1-1 {
grid-row: 1;
grid-column: 1;
}
.tile.tile-position-1-2 {
grid-row: 2;
grid-column: 1;
}
.tile.tile-position-1-3 {
grid-row: 3;
grid-column: 1;
}
.tile.tile-position-1-4 {
grid-row: 4;
grid-column: 1;
}
.tile.tile-position-2-1 {
grid-row: 1;
grid-column: 2;
}
.tile.tile-position-2-2 {
grid-row: 2;
grid-column: 2;
}
.tile.tile-position-2-3 {
grid-row: 3;
grid-column: 2;
}
.tile.tile-position-2-4 {
grid-row: 4;
grid-column: 2;
}
.tile.tile-position-3-1 {
grid-row: 1;
grid-column: 3;
}
.tile.tile-position-3-2 {
grid-row: 2;
grid-column: 3;
}
.tile.tile-position-3-3 {
grid-row: 3;
grid-column: 3;
}
.tile.tile-position-3-4 {
grid-row: 4;
grid-column: 3;
}
.tile.tile-position-4-1 {
grid-row: 1;
grid-column: 4;
}
.tile.tile-position-4-2 {
grid-row: 2;
grid-column: 4;
}
.tile.tile-position-4-3 {
grid-row: 3;
grid-column: 4;
}
.tile.tile-position-4-4 {
grid-row: 4;
grid-column: 4;
}