IE11 и CSS сетка

Question

Возможно ли удаленное размещение в IE11 (очень грубый пример)?

$(document).on('click', '.js-toggle-hide', function(e){
  e.preventDefault();
  $(this).parent().parent().find('.js-hide').toggle();
});

@charset "UTF-8";
.c-sidebar {
  display: grid;
  grid-template-columns: 120px auto;
  outline: 1px solid #ccc;
  overflow: auto;
}

.c-cat {
  display: grid;
  grid-template-columns: 120px auto;
  grid-template-rows: auto;
}
.c-cat__name {
  grid-row: 1 / 1000;
}
.c-cat__toggle {
  grid-row: 1 / 999;
  min-width: 120px;
}
.c-cat__subcat {
  grid-column: 3 / 4;
  min-width: 120px;
}
.c-cat__subcat--all {
  grid-column: 2 / 4;
}

/* decoration */
body {
  padding: 15px;
  background: #eee;
  font-size: 11px;
}

.c-cell {
  background: #fff;
  outline: 1px solid #ccc;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c-sidebar">
    <div class="c-cell">All Categories</div>
    <div>
      <div class="c-cat">
        <div class="c-cat__name  c-cell">Sales</div>
        <div class="c-cat__toggle  c-cell">
          <a href="" class="js-toggle-hide">All items</a>
        </div>
        <div class="c-cat__subcat  c-cell  js-hide">Export sales</div>
        <div class="c-cat__subcat  c-cell  js-hide">Other sales</div>
        <div class="c-cat__subcat  c-cell  js-hide">Product sales</div>
        <div class="c-cat__subcat--all  c-cell  js-hide"><b>All items</b></div>
      </div>
    </div>
  </div>

Обратите внимание, что количество элементов в правых столбцах не определено (типы продаж), клиент может добавить / удалить их.

Есть ли какие-нибудь хитрости css, о которых я не знаю?

Альтернативой является использование таблиц со сложным кодом js / jquery (это только часть кода, но она идеально отражает мою дилемму) и чтобыло бы очень утомительно работать.

Answer 1

Я рекомендую, если вы хотите быть сеткой современной и при этом поддерживать что-то вроде IE11 .... затем начните с display: flex и затем добавьте поддержку мультимедиа, чтобы добавить вашу сетку следующим образом:

@supports (display: grid) { #_your css grid here _# }

Итак, вы можете добавить всю свою сетку туда ... вы не обязательно повторяете, если вы делаете это, вы просто делаете часть сетки здесь (шаблон сетки, столбцы, строки и т. Д.) Иобходить любые другие стили, такие как цвет, шрифт, px и т. д. ...