如何在IE11中为动画计算CSS Grid列的宽度？

<style>
    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-gap: 10px;
    }
</style>

<div class="grid-container">
    <div class="animated-element"></div>
</div>

<style>
    .animated-element {
        animation: animateWidth 2s infinite;
    }

    @keyframes animateWidth {
        0% {
            width: 0;
        }
        100% {
            width: 100%;
        }
    }
</style>

<script>
    // 获取包含动画元素的父元素
    var gridContainer = document.querySelector('.grid-container');

    // 获取动画元素
    var animatedElement = document.querySelector('.animated-element');

    // 获取动画元素的列索引
    var columnIndex = Array.prototype.indexOf.call(gridContainer.children, animatedElement);

    // 计算并设置列的宽度
    var columnWidth = gridContainer.offsetWidth / gridContainer.children.length;
    gridContainer.style.gridTemplateColumns = 'repeat(' + gridContainer.children.length + ', ' + columnWidth + 'px)';
</script>