如何让CSS Grid在IE浏览器中正常工作？

没问题！IE 10和11只支持旧版的CSS Grid语法（带-ms前缀），和现代浏览器的标准Grid差异不小。我给你举个转换的例子，你可以照着调整自己的代码：

示例：标准三列Grid布局（现代浏览器） #

这是你现在可能在Chrome/Firefox中使用的代码：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 1rem;
}

.grid-item {
  padding: 1.5rem;
  background-color: #f0f0f0;
  border-radius: 4px;
}

转换为IE兼容版本 #

IE不支持标准Grid的gap、自动流式排列等特性，需要用旧版语法重新实现：

/* IE 10/11兼容代码，和标准代码共存即可 */
.grid-container {
  display: -ms-grid;
  /* 用空轨道模拟gap：列宽 + 间隙 + 列宽 + 间隙 + 列宽 */
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
  padding: 1rem;
}

.grid-item {
  padding: 1.5rem;
  background-color: #f0f0f0;
  border-radius: 4px;
  /* IE默认所有item重叠在第一个单元格，必须手动指定位置 */
}

/* 逐个指定每个item的位置 */
.grid-item:nth-child(1) {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}
.grid-item:nth-child(2) {
  -ms-grid-column: 3; /* 跳过中间的20px间隙轨道 */
  -ms-grid-row: 1;
}
.grid-item:nth-child(3) {
  -ms-grid-column: 5;
  -ms-grid-row: 1;
}
/* 多行布局的话，继续指定row */
.grid-item:nth-child(4) {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}
.grid-item:nth-child(5) {
  -ms-grid-column: 3;
  -ms-grid-row: 2;
}

关键注意事项 #

• 间隙处理：IE不支持gap，要么像上面那样在-ms-grid-columns中插入固定宽度的空轨道，要么给每个grid-item添加margin（注意要避免容器边缘的多余间隙）。
• 手动定位：IE的Grid不会自动排列元素，必须用-ms-grid-column和-ms-grid-row给每个item指定位置，否则所有元素会重叠在第一个单元格。
• 特性限制：IE不支持grid-auto-flow、grid-template-areas等高级特性，如果你的布局依赖这些，可能需要改用Flexbox或者浮动布局来兼容IE。
• 共存写法：可以同时保留标准Grid代码和IE兼容代码，现代浏览器会自动忽略带-ms前缀的属性，IE会忽略标准Grid属性。

内容的提问来源于stack exchange，提问作者Ennio