显示网格和网格模板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

在此处检查浏览器的支持以了解是否支持什么：https://caniuse.com/#search=grid

参考链接，希望对您有帮助：https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66

Answer 2

据我所知，IE没有网格元素的自动流。我们可以为每个网格元素分配一个特定的网格位置，请检查以下示例：

<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。