Grid-template-columns animation [duplicate]

Question

Is it possible to animate grid-template-columns property? I am building the layout of a technical documentation, where in the first column of the grid you can see descriptions of different errors, and in the second one hyperlinks of related technical stuff.

Pressing a button, with javascript the hyperlinks container will disappeared and change the column number of the grid to 1.

It is working, but the effect is a snap effect, and my goal would be an ease-out slide effect.

css:

.content-grid-rc {
    display: grid;
    grid-template-columns: auto 350px;
    grid-template-rows: auto auto;
    grid-template-areas: "a b"
                     "c c";
    transition: all 1s;

}

javascript:

    function hideLinks(){
    let x = document.getElementsByClassName("card");
        for(let i = 0; i < x.length; i++){
            x[i].style.display = "none";
            document.getElementById("content-grid-rc").style.gridTemplateColumns = "100% 0%";
        }
    }

Many thanks for the tips!

Answer 1

grid-template-columns could be animated, but unfortunately - as of today - there is no support in any of the known browsers, yet. However, you can animate (grid-)gap, (grid-)row-gap or (grid-)column-gap in all browsers, except Safari.