Grid布局在IE中的兼容

1、grid前缀-ms-。

在css样式书写的时候为了使其在IE中兼容，需要加上前缀-ms-

.container {
    width: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr auto 1fr;
    grid-template-columns: 1fr auto 1fr;
}

2、每个网格元素分配一个特定的网格位置

尽管在css中加入了-ms-前缀，但在IE中grid布局还是不能按照我们想象中的实现。每个未放置的元素最终将堆叠为1,1。因为IE没有自动流动的网格元素，需要为每个网格元素分配一个特定的网格位置。加入代码：
-ms-grid-column

代码：

<div class="container">
	<div class="item1">
		Item 1
	</div>
	<div class="item2">
		Item 2
	</div>
	<div class="item3">
		Item 3
	</div>
</div>

.container {
    width: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr auto 1fr;
    grid-template-columns: 1fr auto 1fr;
}

.item1 {
    text-align: center;
    background: red;
    color: white;
    padding: 20px;
    -ms-grid-column: 1;
}

.item2 {
    text-align: center;
    background: green;
    color: white;
    padding: 20px;
    -ms-grid-column: 2;
}

.item3 {
    text-align: center;
    background: blue;
    color: white;
    padding: 20px;
    -ms-grid-column: 3;
}

未加入-ms-grid-column：

加入-ms-grid-column：

若有错误，欢迎指正！