animating a smooth css grid-column change

I am using CSS grid layout to position various parts on a website. I use grid-column: x / x; and grid-row x / x; to set their position and size on the page. It's working really well.

Now I am trying to animate a smooth transition between two grid-column fixes which happens when the screen size changes. The change is from grid-column: 3 / 9; to grid-column: 2 / 10; which means the div grows on either side by 1fr each. At the moment it just "pings" into place but I would like to have a smooth transition between the two.

Anybody got any ideas how to tackle it?

Here is the snippet from my CSS file:

nav {
    background-color: $company-blue;
    border          : 3px solid $company-yellow;
    opacity         : 0.8;
    grid-column     : 3 / 9;
    grid-row        : 3 / 4;
    ...
    @media screen and (max-width: 1378px) {
    grid-column : 2 / 10;
    }
}