Transition effect only working in firefox

Question

Im trying to expand the grid section where the mouse is on, it all works in firefox but it dosen't work in any other browser but the strange thing is that the grid portion it's expandend but no transition is shown so it just expand super fast i tried using only css and it dosen't work it works only on firefox

grid = document.getElementsByClassName('grid-container')[0];
firstItem = grid.children[0];
secondItem = grid.children[1];
thirdItem = grid.children[2];

if(window.matchMedia("(min-width: 768px)").matches){
    var itemTouch = (item) => {
        grid.style.transition = "grid-template-columns 0.5s ease";
        if(item == firstItem)
            grid.style.gridTemplateColumns = '0.25fr 0.15fr 0.15fr';
        if(item == secondItem)
            grid.style.gridTemplateColumns = '0.15fr 0.25fr 0.15fr';
        if(item == thirdItem)
            grid.style.gridTemplateColumns = '0.15fr 0.15fr 0.25fr';
    }

    var standardGrid = () => {
        grid.style.gridTemplateColumns = '0.2fr 0.2fr 0.2fr';
    }
}
else{
    const items = [firstItem, secondItem, thirdItem];
    for (let i = 0; i < items.length; i++){
        items[i].removeAttribute("onmouseenter");
        items[i].removeAttribute("onmouseleave");
    }
}

Code here

Answer 1

Grid animations are not implemented yet in any other browser except for Firefox