CSS IE11 中的网格布局，内容间隙较大

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 将自动更改高度属性以使其保持网格布局。但是在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

CSS IE11 中的网格布局，内容间隙较大

CSS grid layout in IE11 with large gap in content

html

css

internet-explorer

internet-explorer-11

css-grid