Поддержка CSS-разметки для IE11

Question

мы пытаемся разработать макет пользовательского интерфейса с использованием CSS-сетки для IE-11, проблема здесь в том, что мы уже разработали макет для всех браузеров, но не тестировали на IE11, сейчас мы находимся на последних этапах приложения и пытаемся заставить его работать для IE11, но похоже, что текущий css не работает для IE11, поэтому решил написать отдельный css для IE11 путем обнаружения браузером. вот мой макет (попытка разработки без изменения HTML -> если мы изменим HTML, это повлияет на другие браузеры)

мой вопрос: если вы видите код, я не могу создать требуемый макет, как показано в макете, без изменения структуры HTML.

body {
  margin: 100px;
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  margin: 10px;
}

.ie-content {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr;
  background-color: blueviolet;
  color: #444;
}

.ie-viewer {
   -ms-grid-column: 1;
   grid-column: 1;
  background: yellowgreen;
  -ms-grid-column-span: 3;
  grid-column: 1 / span 3;
}
.ie-viewerControls {
  -ms-grid-column: 1;
  grid-column: 1;
}
.ie-configure {
  -ms-grid-column: 4;
  grid-column: 4;
  background: red;
  height:100px;
}

<div class="ie-content">
        <div class="box ie-viewer">viewer</div>
        <div class="box ie-viewerControls">viewerControls</div>
        <div>
            <div class="box ie-configure">configure </div>
        </div>
    </div>
</div>

Answer 1

IE 11 не имеет эквивалента для grid-column-gap и grid-row-gap. Если вам это нужно, вам придется добавить поддельные столбцы / пробелы, такие как

-ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;

Кроме того, каждый элемент в сетке IE 11 должен располагаться по столбцам / строкам, в противном случае они заканчиваются друг над другом в столбце 1 / строке 1.

Это, как говорится, конечно, вы должны принять во внимание поддельные "пробел" столбцы / строки при позиционировании / охвате элементов.