Yu Zhou
2020-12-03 10:04:12
IE needs more than the -ms- prefix with grid. IE does not have auto-flow of grid elements. If you want to make grid work in IE, you need to assign a specific grid position to each grid element.
Please refer to the sample below, it can work well in IE 11:
.grid-container {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr);
-ms-grid-rows: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.item1 {
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.item2 {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
.item3 {
-ms-grid-column: 3;
-ms-grid-row: 1;
}
.item4 {
-ms-grid-column: 4;
-ms-grid-row: 1;
}<div class="grid-container">
<div class="item1">111</div>
<div class="item2">222</div>
<div class="item3">333</div>
<div class="item4">444</div>
</div>