CSS grid layout in IE11 with large gap in content

Question

I'm using a CSS grid layout on a page, but it's producing a massive gap in content between two grid elements on IE11:

This is obviously fine in Chrome and FF. This is what I have for my CSS for this, which I've run through 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>

I started to mess with it some more and I noticed that this:

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

}

looks like it's creating that gap. The only kicker is that I'm not sure if there is something that could control that to auto or not? Still wrapping my head around CSS grid and then trying to debug IE is problematic as usual.

Answer 1

Reproduce the problem on my side, in the IE/Edge browser ,the sidebar cell locates the same row with the top__content cell. So, if it is too high, the top__content will auto change the height property to make them keep the grid layout. But in the Chrome browser, the sidebar cell occupies two rows.

It seems like this is a browser issue, IE/Edge browser cannot use the "-ms-grid-row: 1 / span 2;" method to merge cells, if we want to merge cell, we could use "-ms-grid-row-span" to set the sidebar cell, make it spans two rows.

Using the following code:

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

Then the result like this