IE11中的CSS网格布局，内容差距很大

Question

我在页面上使用 CSS 网格布局，但它在 IE11 上的两个网格元素之间产生了巨大的内容差距：

这在 Chrome 和 FF 中显然很好。这就是我的 CSS 所拥有的，我已经通过 AutoPrefixer 运行了：

.row--grid {
  display: grid;
  display: -ms-grid;
  -ms-grid-columns: 2fr 1fr;
  grid-template-columns: 2fr 1fr;
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  margin-left: -15px;
  margin-right: -15px;
} 
.row--grid > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.row--grid > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;

}

.row--grid > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;

}

.row--grid > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;

}

.top__content {
  -ms-grid-column: 1;
  grid-column: 1;
}

.sidebar__col {
  -ms-grid-column: 2;
  grid-column: 2;
  grid-row: 1 / -1;
  margin-left: 50px;
  width: 100%;
  padding-right: 20px;
  max-width: 320px;
}

.main__content {
  -ms-grid-column: 1;
  grid-column: 1;
}

HTML：

<div class="row--grid">
 <div class=" top__content">
  <h1>Title...</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>                                                   
 </div>
 <div class="sidebar__col">
  <h2>Sidebar</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>
 <div class="main__content">
  <h3>Other Content Area</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
 </div>
</div>

我开始搞砸了，我注意到：

.row--grid > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;

}

看起来它正在制造这种差距。唯一的问题是我不确定是否有什么东西可以控制auto？仍然把我的头绕在 CSS 网格周围，然后尝试调试 IE 像往常一样有问题。

Answer 1

重现我这边的问题，在 IE/Edge 浏览器中，侧边栏单元格与 top__content 单元格位于同一行。因此，如果它太高，top__content 将自动更改 height 属性以使其保持网格布局。但在 Chrome 浏览器中，侧边栏单元格占据两行。

这似乎是浏览器问题，IE/Edge 浏览器无法使用“-ms-grid-row: 1 / span 2;”合并单元格的方法，如果要合并单元格，可以使用“-ms-grid-row-span”设置侧边栏单元格，使其跨越两行。

使用以下代码：

        .row--grid > *:nth-child(2) {
            -ms-grid-row: 1;
            -ms-grid-column: 2;
            -ms-grid-row-span:2;
        }

那么结果like this