Question

我对CSS不太熟悉，以为我用CSS网格赢得了大奖，但是我没有意识到它与IE11不太兼容。我在尝试修复以下代码时遇到了许多问题：

.my-grid-filters {
  display: grid;
  grid-auto-rows: minmax(50px, 50px);
   grid-gap: 5px;
}

.my-grid-filters filter {
  display: flex;
  align-items: flex-end;
}

@media screen and (min-width: 40em) {
  .my-grid-filters {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 5px;
  }

  .my-grid-filters filter:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: span 2;
  }
}

我通过Autoprefixer online tool运行了它，结果如下：

.my-grid-filters {
  display: -ms-grid;
  display: grid;
  grid-auto-rows: minmax(50px, 50px);
   grid-gap: 5px;
}

.my-grid-filters filter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

@media screen and (min-width: 40em) {
  .my-grid-filters {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 5px;
  }

  .my-grid-filters filter:nth-child(1) {
    grid-column: 1 / -1;
    -ms-grid-row-span: 2;
    grid-row: span 2;
  }
}

但是，这似乎使所有网格元素相互堆叠。 This article包含很多信息，但是我正在努力将其应用于我的代码。

似乎建议我需要将每个元素手动放置在网格中，但是我的CSS Grid用例的一部分是我不知道屏幕上可能同时存在多少个重复元素由迭代javascript生成。这也使我也难以应用单独的div ID。

任何帮助将不胜感激

如何重构CSS网格以实现IE11兼容性

0 个答案: