Почему css гриды не работают на ie11, хотя префиксы выставлены?

Question

[GreenMan1899]

Пример
https://codepen.io/danilst/pen/LaxXZo

Comments

[Rustam Bainazarov]

Потому что они поддерживаются в IE11 неполностью + особенности по типу отсутствия свойства grid-gap.

P. S. А в вашем случае более чем хватит flexbox'a.

[DanKud]

IE поддерживает только старую версию спецификации - https://www.w3.org/TR/2011/WD-css3-grid-layout-201...
Соответственно если вы хотите использовать более свежую спецификацию, то с IE вам не по пути.

[GreenMan1899]

DanKud, я и так использовал старую спецификацию для ms в примере

[DanKud]

GreenMan1899, к сожалению тогда не знаю. Видимо даже старая спецификация поддерживается не полностью :(

[Ankhena]

GreenMan1899, в предыдущем вопросе написала как работают.
Без жесткого распределения по строкам не получилось.

Answer 1

[lagudal]

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

<style>
 -ms-grid-rows: auto auto;
.table-kpi__number-row-1 {
  -ms-grid-row:1;
  -ms-grid-column:1;
  }
.table-kpi__number-row-2 {
  -ms-grid-row:2;
  -ms-grid-column:1;
  }
.table-kpi__property {
  color: #262626;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 34px;
}
.table-kpi__property-row-1 {
  -ms-grid-row:1;
  -ms-grid-column:2;
}
.table-kpi__property-row-2 {
  -ms-grid-row:2;
  -ms-grid-column:2;
}
.table-kpi__edit-row-1 {
  -ms-grid-row:1;
  -ms-grid-column:3;
}
.table-kpi__edit-row-2 {
  -ms-grid-row:2;
  -ms-grid-column:3;
}
</style>

	<div class="table-kpi">
    <div class="table-kpi__number table-kpi__number-row-1">320 052</div>
    <div class="table-kpi__property table-kpi__property-row-1">Количество обработанных заявок</div>
    <div class="table-kpi__edit table-kpi__edit-row-1">
        <button class="btn btn--middle btn--blue-bordered">
            <img src="img/icon-edit.svg" alt="">
            <span>Редактировать</span>
        </button>
    </div>

    <div class="table-kpi__number table-kpi__number-row-2">92</div>
    <div class="table-kpi__property table-kpi__property-row-2">Процент успешно закрытых заявок, %</div>
    <div class="table-kpi__edit table-kpi__edit-row-2">
        <button class="btn btn--middle btn--blue-bordered">
            <img src="img/icon-edit.svg" alt="">
            <span>Редактировать</span>
        </button>
    </div>

	</div>

Думаю, смысл понятен

Comments

[GreenMan1899]

это не уникальное решение. Можно догадаться, что строк в этой таблице может быть произвольное количество. Для N-го числа строк так не пропишешь.

[lagudal]

Так это ие11 - по другому нельзя, если не так, то по другому все равно надо уникализировать каждую ячейку, по колонкам и строкам.
Приходит в голову только, тем 3 классам, что уже есть - number, property, edit - прописать их явные позиции в колонках, по строкам же уникализировать например как nth-child от родительского дива.
Т.е. для 4, 5 и 6 элемента - строка будет 2, для 7 8 9 - соотв-но 3 и так далее.
Тогда в коде никаких классов добавлять не придется, но стили для них все равно нужны.
Как их добавлять - возможны варианты (например, с js считать строки или еще как )
целесообразно ли это - решать вам.