При использовании css grid в IE элементы перекрывают друг друга. Как исправить?

Question

[Максим Морозов]

Нужно исправить часть кода, написанного на css grid. Никто написанное не проверил на IE11, добавил лишь код с autoprefixer. И как оказалось, все элементы перекрывают друг друга. Вот пример кода, который отлично работает во всех браузерах, кроме IE:

<div class="histories-container">
  <div class="event">1</div>
  <div class="event">2</div>
  <div class="event">3</div>  
  <div class="event">4</div>
  <div class="event">5</div>
</div>

.histories-container {
      display: -ms-grid;
      display: grid;
      -ms-grid-rows: 1fr;
      -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr;
    }
    
    .event:nth-child(2n) {
        -ms-grid-column: 2;
        grid-column-start: 2;
        -ms-grid-column-align: end;
        }
    
     .event:nth-child(2n+1) {
        -ms-grid-column: 1;
        grid-column-start: 1;
        -ms-grid-column-align: start;
        justify-self: start;
      }

https://www.w3schools.com/code/tryit.asp?filename=...

Нашёл решение с использованием:

nth-child(1,2,3...n) {
-ms-template-row:.....
}

Но там нужно знать точное количество элементов. В моём случае оно полностью динамическое и может иметь любое множество. Подскажите как решить, не хочется всё переписывать.

Comments

[Rustam Bainazarov]

Grid и IE — вещи несовместимые. Слишком много много багов и ограничений.

[Nixtone]

У нас байкот IE, ты че отщепенецц чтоле?

[Максим Морозов]

У меня выбора нет, народ, фирме нужно IE, пенсионеры очень часто заходят, видимо

[4iloveg]

Максим Морозов, попробуй тогда переписать без использования грид и выдавай этот код тем у кого IE

[Максим Морозов]

4iloveg, это я хотел оставить на крайний случай(

Answer 1

[Юра Комаров]

Напиши так

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
.histories-container
   display: flex;
   flex-wrap: wrap;

.event
   width: 100%;
   min-height: 1px;
   flex: 0 0 8.333333333333332%;
   max-width: 8.333333333333332%;

Comments

[Юра Комаров]

Элементы будут друг за другом, ширину напишешь свою в %

[coder_fr]

Ты мой спаситель! Столкнулся тоже с такой проблемой, не мог никак понять ничего)