grid-template-columns不适用于ie11吗？

Question

我使用的是顺风css，而grid-template-columns在IE11中不起作用。

我如何分离才能使它在IE11上运行？

grid-template-columns: repeat(2, minmax(0, 1fr))

  <div
    class="mx-15 tb:grid tb:grid-cols-2 tb:gap-x-40 tb:mt-20 tb:mx-40 pc:w-1280 pc:mx-auto pc:mt-0 grid-column"
  >
    <article class="mb-100">
      <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
        2020.10.26
      </p>
      <div
        class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73"
      >
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaa</span>
      </div>
    </article>
    <article class="mb-100">
      <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
        2020.10.26
      </p>
      <div
        class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73"
      >
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaa</span>
      </div>
    </article>
    <article class="mb-100">
      <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
        2020.10.26
      </p>
      <div
        class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73"
      >
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaa</span>
      </div>
    </article>
  </div>

现在，问题是这个代码在Chrome，Firefox和Opera中运行得很好，但是当我在Microsoft Edge或IE11中打开这个页面时，所有的网格项都在第一个单元格中相互重叠。

Answer 1

be浏览器的grid-template-columns可以与层次关系-ms-grid兼容。然后，您可以设置子样式中的行列比例。示例如下：

​

.wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 300px 300px 300px;
  grid-template-columns: 300px 300px 300px;
}

.box1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.box2 {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.box3 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

<div class="wrapper">
  <article class="box1">
    <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
      2020.10.26
    </p>
    <div class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73">
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaa</span>
    </div>
  </article>
  <article class="box2">
    <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
      2020.10.26
    </p>
    <div class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73">
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaa</span>
    </div>
  </article>
  <article class="box3">
    <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
      2020.10.26
    </p>
    <div class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73">
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaa</span>
    </div>
  </article>
</div>

​

IE的结果：

​

​