Отображать сетку и шаблон сетки css свойство не работает в браузере IE 11

Question

Оба приведенных ниже кода работают нормально в chrome и firefox. В IE 11 не работает.

сетка дисплея не работает в IE. Есть предложения?

 .table-content {
    display: grid;
    grid-template-rows: 45px 80px repeat(6, 30px);

}

.table-points {
    grid-template-columns: 80px repeat(auto-fit, minmax(40px, 1fr));
    display: grid;
    }

Answer 1

Насколько я знаю, IE не имеет автопотока элементов сетки. Мы могли бы назначить определенную c позицию сетки для каждого элемента сетки, пожалуйста, проверьте следующий пример:

<style>
    .container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 150px 50px;
        grid-gap: 1vw;
        display: -ms-grid;
        /* also faking 1vw grid-gap */
        -ms-grid-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
        /* also faking 1vw grid-gap */
        -ms-grid-rows: 100px 1vw 100px;
    }

    .grid-item {
        /* style just for demo */
        background-color: yellow;
    }

        /* Explicit placement for IE */
        /* Omitting default value of -ms-grid-column: 1 and -ms-grid-row: 1 where possible */
        .grid-item:nth-child(2) {
            -ms-grid-column: 3;
        }

        .grid-item:nth-child(3) {
            -ms-grid-column: 5;
        }

        .grid-item:nth-child(4) {
            -ms-grid-column: 7;
        }

        .grid-item:nth-child(5) {
            -ms-grid-row: 3;
        }

        .grid-item:nth-child(6) {
            -ms-grid-row: 3;
            -ms-grid-column: 3;
        }

        .grid-item:nth-child(7) {
            -ms-grid-row: 3;
            -ms-grid-column: 5;
        }

        .grid-item:nth-child(8) {
            -ms-grid-row: 3;
            -ms-grid-column: 7;
        }
</style>
<div class="container">
    <div class="grid-item">1,1</div>
    <div class="grid-item">1,2</div>
    <div class="grid-item">1,3</div>
    <div class="grid-item">1,4</div>
    <div class="grid-item">2,1</div>
    <div class="grid-item">2,2</div>
    <div class="grid-item">2,3</div>
    <div class="grid-item">2,4</div>
</div>

Результат (браузер IE 11):

Кроме того, я думаю, что вы также можете рассмотреть возможность использования Bootstrap Grid system , она поддерживает IE11, Microsoft Edge, Firefox и Chrome browser.

Answer 2

Проверьте поддержку браузеров здесь, чтобы узнать, что будет поддерживаться или нет: https://caniuse.com/#search = сетка

Ссылочная ссылка, надеюсь, это поможет: https://medium.com/@elad / support- css -grid-in internet-explorer -b38669e75d66