animating a smooth css grid-column change

Question

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;
    }
}

Answer 1

There are no CSS transitions for grid-column or grid-row properties. In order to have any,

grid-column: 2.5 / 9.5;

...would have to make sense from a rendering point of view.
Imagine you're the guy coding the browser. How would you render a grid-column:2.5 / 9.5;?

Expecting CSS transitions to work here is like expecting them to work in CSS columns when content moves between columns.

Need animations with CSS Grid? JavaScript is your only friend.

Here's how I'd go about it:

1. clone contents of each grid element into absolutely positioned containers.
2. fade real content out, using opacity
3. apply the new grid-columns property to the grid
4. animate cloned elements into new positions of real ones
5. fade cloned content out and the real one back in
6. delete clones.

Making this work cross-browser/cross-device might pose a few problems, but it's doable.

Note: You might want to consider adding a layer of wrappers between the contents of your grid elements and the grid elements, to help with two things:

1. make sure each grid element has only one child (to simplify getting the width/height for calculating transition)
2. simplify tracking each element so you know what to transition where

Answer 2

I've cheated it with a very poor hack. But it works...

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) {
        position   : fixed;
        z-index    : 9999;
        width      : 60%;
        margin     : 155px 20% 0;
        animation  : grow-fixed 1s ease;
        @keyframes grow-fixed {
            0% {
                width : 60%;
                margin: 155px 20% 0;
            }

            100% {
                width : 80%;
                margin: 155px 10% 0;
            }
        }
        width      : 80%;
        margin     : 155px 10% 0;
        grid-column: 2 / 10;
        grid-row   : 3 / 4;
    }
    @media screen and (min-width: 1378px) {
        position   : fixed;
        z-index    : 9999;
        width      : 80%;
        margin     : 155px 10% 0;
        animation  : shrink-fixed 1s ease;
        @keyframes shrink-fixed {
            0% {
                width : 80%;
                margin: 155px 10% 0;
            }

            100% {
                width : 60%;
                margin: 155px 20% 0;
            }
        }
        width      : 60%;
        margin     : 155px 20% 0;
        grid-column: 3 / 9;
        grid-row   : 3 / 4;
    }