CSS:display:grid和/或-ms-grid

是否有一种方法可以同时使用这两种或其中一种将

display:grid/-ms grid

用于一个样式表，或者我必须使用HTML黑客或JavaScript来查询使用网格布局查看页面的浏览器类型

例如：

以下样式似乎不起作用

.container{
显示：网格-ms网格；
网格模板列：重复（4，1fr）；
网格模板行：重复（150px，50px）；
网格间距：1vw；
-ms网格列：重复（4，1fr）；
-ms网格行：重复（150px，50px）；
-ms网格间距：1vw；
}

您的

显示规则需要正确构造。你所拥有的是无效的

显示：网格-ms网格；

此外，
网格模板行
规则无效。第一个参数应该是指定重复次数的整数

网格模板行：重复（150px，50px）；

另外，我不相信在中存在
repeat（）
符号。它看起来像是在游戏中引入的，所以IE不支持它

-ms网格列：重复（4，1fr）；
-ms网格行：重复（150px，50px）；

最后，最好将官方（W3C）属性放在前缀版本之后，以便它们在级联（）中获得优先权

试试这个：

.container{
显示：-ms网格；
显示：网格；
-ms网格柱：1fr 1fr 1fr 1fr；
网格模板列：重复（4，1fr）；
-ms网格行：150px 50px；
网格模板行：150px 50px；
-ms网格间距：1vw；
网格间距：1vw；
}
将新的CSS网格布局语法转换为过时的IE确实是一个挑战。这不仅仅是添加一些供应商前缀的问题

IE对新版本CSS网格布局的支持非常有限。没有IE的支持


自动放置并选择其流（
grid auto flow
CSS属性）
重复列/行（
repeat
函数和一些特殊值，如
auto fill
和
auto fit
）。在某些情况下，这意味着您只需使用显式值进行替换，就像在您的情况下，您可以将
网格模板列：repeat（4，1fr）
替换为
-ms网格列：1fr 1fr 1fr
，这将非常有效。但是如果你有类似于
网格模板列：repeat（auto-fill，1fr）
的东西，那么在IE中实现它是不可能的
网格单元格间距（
网格行间距
，
网格列间距
，
网格间距
CSS属性）。可以使用额外的栅格轨迹伪造间隙
自动生成的轨迹（
grid auto columns
，
grid auto rows
CSS属性）
命名网格区域（
网格区域
，
网格模板区域
CSS属性）

你只需要忘记IE的这种可能性

此外，支持的IE属性的某些值也不受支持

自动置换
IE实现中没有自动放置行为。这意味着您必须定位所有对象，而不是使用网格的自动放置功能

如果不定位项目，它们将堆叠在网格的第一个单元格中。这意味着您必须为每个网格项显式设置一个位置，否则它将驻留在第一个单元格中。如果您有这样的标记：


.wrapper{
显示：-ms网格；
显示：网格；
栅隙：10px；
-ms网格列：50px 50px；
网格模板列：50px 50px；
-ms网格行：50px 50px；
网格模板行：50px 50px；
背景色：#fff；
颜色：#444；
}
.盒子{
边界半径：5px；
填充：20px；
字体大小：150%；
}

A.
B
C
D
瓦迪姆的答案几乎就是你应该做的。但是还有一些CSS技巧可以用来减轻痛苦

0。请务必阅读此博文，以决定是否要为支持IE的网站使用网格：

如果您对上一个问题的回答是“是”，请继续阅读：

使用自动刷新器。它将把一些CSS网格属性替换为它们的IE等价物。但考虑到网格属性的复杂性（重复、最小-最大、跨度等），autoprefixer无法涵盖所有情况
当您想要编写符合规范的CSS，但仍然支持IE时，一个非常值得信赖的伙伴是
@supports（）
at规则。我使用它来使用更高级的网格属性，例如
网格间距
，等等：

.card-list {
  grid-row: 4;
  grid-column: 1 / 3;
  padding: 1.5vh 1vh;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}
.card {
  margin-bottom: 1vh;
}
.card:nth-of-type(odd) {  /* takes care of IE */
  margin-right: 1vh;
  grid-column: 1;
}
.card:nth-of-type(even) {
  grid-column: 2;
}

@supports(grid-gap: 1vh) { /* still using standard code! */
  .card-list {
    grid-gap: 1vh;
  }
  .card {
    margin-right: 0;
    margin-bottom: 0;
  }
}


这是我用来做IE的：

我为所有当前浏览器支持添加了@supports（）。如果在新的网格属性中使用@supports（）传递，例如@supports（网格区域：auto），以确保现代浏览器将拾取它。不要使用@support（display:grid），因为IE将识别display:grid，然后使用它没有的现代网格属性。我不得不使用1px的边距来模拟IE中的网格间隙

* {
    box-sizing: border-box;
}

.item-bg {
    background-color: rgb(92, 182, 205);
    border-radius: 6px;
    margin: 1px;
}

.container {
    display: -ms-grid;
    
   width: 800px;
    height: 600px;
    -ms-grid-columns: 200px 1fr 1fr;
    -ms-grid-rows: 80px 1fr 1fr 100px;
    
    
    
    }


.header {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1/4;

}
.sidebar {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2/4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;

}
.content-1 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2/4;

}
.content-2 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2/3;

}
.content-3 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-column: 3/4;
}
.footer {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    grid-row: 4/5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1/4;
}
@supports(grid-area: auto){
    .item-bg {
        background-color: indianred;
        border-radius: 6px;
        margin: 0;
    }
    
    .container {
        display: grid;
        width: 750px;
        height: 600px;
        grid-template-columns: 200px 1fr 1fr;
        grid-template-rows: 80px 1fr 1fr 100px;
        grid-gap: 2px;
        }
    .header {
        grid-row: 1/2;
        grid-column: 1/4;
    
    }
    .sidebar {
        grid-row: 2/4;
        grid-column: 1/2;
    
    }
    .content-1 {
        grid-row: 2/3;
        grid-column: 2/4;
    
    }
    .content-2 {
        grid-row: 3/4;
        grid-column: 2/3;
    
    }
    .content-3 {
        grid-row: 3/4;
        grid-column: 3/4;
    }
    .footer {
        grid-row: 4/5;
        grid-column: 1/4;
    }
}

html是

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Basic Layout</title>
        <link rel="stylesheet" href="basiclayoutie.css" type="text/css">
    </head>
    <body>
        <div class="container">
            <div class="header item-bg">header</div>
            <div class="sidebar item-bg">sidebar</div>
            <div class="content-1 item-bg">Content-1</div>
            <div class="content-2 item-bg">Content-2</div>
            <div class="content-3 item-bg">Content-3</div>
            <div class="footer item-bg">Footer</div>
        </div>
    </body>
</html>


基本布局
标题
边栏
内容-1
内容-2
内容-3
页脚
答案不错，有W3C链接。但是
-ms-grid-gap
/
grid-gap
不适用于IE/Edge，而且从来都不适用于IE/Edge。只需添加一点。微软已经将Edge的Windows10Creator秋季更新为16，支持通用CSS网格布局。对IE11不太确定，它仍然接收安全更新。11永远不会升级。它只接收安全更新。它已经更新，所以现在你不需要使用-ms网格列，只需要普通网格模板就可以了，除非你还没有更新Windows 10I还没有看到IE anywhere提到的此更新。它在我的电脑上也不可见（已安装最新的FCU更新）。你指的是Edge吗？另外，网格模板对IE也没有多大帮助，因为需要