我正在为网格使用以下HTML标记。

<section class="grid">
    <article class="grid-item width-2x height-2x">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item width-2x">....</article>
    <article class="grid-item height-2x">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item width-2x height-2x">....</article>
</section>

SCSS代码如下所示：

.grid {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    grid-gap: 30px;
    align-items: start;

    .grid-item {
        &.height-2x {
            grid-row: span 2;
        }
        &.width-2x {
            grid-column: span 2;
        }
    }
}

由于我在工作流程中使用自动前缀，因此会自动添加所有带有-ms前缀的相关属性。我可以通过检查元素确认。

现在，问题是此代码在Chrome，Firefox和Opera中运行正常，但是当我在MicrosoftEdge或IE11中打开此页面时，所有网格项在第一个单元格处都相互重叠。根据该站点的介绍，这些浏览器支持带-ms前缀的CSS网格布局。我已经为这种情况创建了一个CodePen。

CodePen链接

为什么不起作用？

.grid {

  display: -ms-grid;

  display: grid;

  -ms-grid-columns: (1fr)[4];

  grid-template-columns: repeat(4, 1fr);

  -ms-grid-rows: (270px)[4];

  grid-template-rows: repeat(4, 270px);

  grid-gap: 30px;

}



.grid .grid-item {

  background-color: #000;

  color: #fff;

  text-align: center;

  line-height: 270px;

}



.grid .grid-item.height-2x {

  -ms-grid-row: span 2;

  grid-row: span 2;

}



.grid .grid-item.width-2x {

  -ms-grid-column: span 2;

  grid-column: span 2;

}


<section class="grid">

  <article class="grid-item width-2x height-2x">....</article>

  <article class="grid-item">....</article>

  <article class="grid-item">....</article>

  <article class="grid-item width-2x">....</article>

  <article class="grid-item height-2x">....</article>

  <article class="grid-item">....</article>

  <article class="grid-item">....</article>

  <article class="grid-item width-2x height-2x">....</article>

</section>