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

Answer 1

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

Answer 2

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