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 автоматически изменит свойство 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;
        }

Тогда результат вот так