Why is my Angular app's IE compatible CSS Grid

Question

Since internet explorer supports the old css grid implementation I decided to write a sass implementation that works fully cross browser for grids. Right now there is no support for column widths being different.

This is causing internet explorer to hang for up to 15 seconds whenever I try to inspect the DOM. Whenever I open a component host element in the DOM Explorer in IE it hangs and shows empty space in the DOM explorer until it eventually adds the elements. I also cannot close the development console as it causes the site to 'not respond' and freeze.

global style sheet:

 // grid
// reusable grid classes
$max-rows: 10;
$max-columns: 10;
@for $rowNum from 1 through $max-rows {
    @for $colNum from 1 through $max-columns {
        .grid-col#{$colNum}-row#{$rowNum} {
            width: 100%;
            @include display-grid($colNum);
            @include ms-support-children($colNum, $rowNum);
        }
    }
}

// the same logic but with gaps
$possibleGapSizes: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50;
@for $rowNum from 1 through $max-rows {
    @for $colNum from 1 through $max-columns {
        @each $gapSize in $possibleGapSizes {
            .grid-col#{$colNum}-row#{$rowNum}-gap#{$gapSize} {
                width: 100%;
                @include display-grid($colNum);
                @include ms-support-children($colNum, $rowNum, $gapSize);
            }
        }
    }
}

mixins:

// Grid related
// NB: IE expects information on grid widths defined on children so we use that kind of
//     syntax for all browsers for consistency

// NB: column values cannot be auto - use fr
@mixin display-grid($columnCount) {
    display: grid;
    display: -ms-grid;
    grid-template-columns: calculateFr($columnCount);
    -ms-grid-columns: calculateFr($columnCount);
}

@mixin display-inline-grid($columnCount) {
    display: inline-grid;
    display: -ms-inline-grid;
    grid-template-columns: calculateFr($columnCount);
    -ms-grid-columns: calculateFr($columnCount);
}

@mixin ms-support-children($columnCount, $rowCount, $gapPixelsNum: "") {
    $nthCounter: 1;
    @for $k from 1 through $rowCount {
        @for $i from 1 through $columnCount {
            > *:nth-child(#{$nthCounter}) {
                grid-column: $i;
                -ms-grid-column: $i;
                grid-row: $k;
                -ms-grid-row: $k;

                // this whole block is about gaps
                @if $columnCount > 1 {
                    @if $gapPixelsNum != "" {
                        @if $i % 2 == 0 {
                            margin-left: $gapPixelsNum + px;
                        }
                        @else {
                            margin-right: $gapPixelsNum + px;
                        }
                    }
                }
            }

            $nthCounter: $nthCounter + 1;
        }
    }
}

@function calculateFr($columnCount){
    $frs: '';

    @for $i from 1 through $columnCount {
        $frs: $frs + '1fr ';
    }

    @return unquote($frs);
}

I should say that as long as the dev console isnt opened it seems to be fine.