Css grid не работает в IE11?

Question

[NewBeHere]

Добрый вечер. Подскажите пожалуйста, почему этот код не работает в ie11? В Edge все ок или 11 версия и не поддерживает гриды? Тот же caniuse говорит что частично

https://codepen.io/Alex2033/pen/jvWPwj

Answer 1

[lagudal]

Это означает, что для ие11 надо отдельно прописывать стили, начиная с самого определения display:gird;
и ниже: display: -ms-grid;
ну и все свойства дублировать для ие.
Это несложно, но надо повозиться, потом привыкнете.
К примеру, для него нет grid-gap, все отступы прописываются явно, как отдельная колонка.
Как то так

.startGrid {
	display: -ms-grid;
	-ms-grid-columns: 32% 20px 32% 20px 32%;
	-ms-grid-rows: auto 20px auto 20px auto;

}
В этом примере 3 колонки, 2 ряда, между ними по 20 px отступы.
Что неясно легко гуглится по -ms-grid

Comments

[NewBeHere]

так в этом-то и дело, что именно так я все и сделал. Вместо gap использовал марджины, добавил префикс -ms, поменял спаны. И все равно не работает

[lagudal]

Так как у вас оно не будет работать.
Посмотртите внимательнее, я думаю вы увидите разницу.

К сожалению, сейчас нет доступа к компьютеру с ие11, только в понедельник.
Если до этого времени не решите проблему, напишу работающий вариант.

[NewBeHere]

lagudal, напишите, если не затруднит. Попробовал ваш вариант, не получилось, прогнал через автопрефиксер тоже самое. То есть все элементы грид-контейнера находятся в одной точке, накладываются друг на друга. Однако, если мы прописываем конкретно элементу сколько колонок и строк он должен занимать, он занимает. Вот скрин. Ну а как должно быть я скинул в кодпене

[lagudal]

Вот код, который работает в ie11 - к сожалению, этот браузер не поддерживается ни codepen ни fiddle - пишу тут
Html

<div class="grid">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
  <div class="item item-4"></div>
  <div class="item item-5"></div>
  <div class="item item-6"></div>
  <div class="item item-7"></div>
</div>

CSS

.grid {  
  display: grid;
  display: -ms-grid;
  -ms-grid-columns: 32% 30px 32% 30px 32%;
  -ms-grid-rows: auto 30px auto 30px auto;
  grid-template-columns: repeat(3, 1fr);
  grid-gap:30px;
}

.item {
  background-color: #333;
  min-height: 170px;

}
.item-1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-row: span 2;
  -ms-grid-row-span: 3;
}
.item-2 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-column: span 2;
  -ms-grid-column-span: 3;
}
.item-3{
  -ms-grid-row: 3;
  -ms-grid-column: 3;  
}
.item-4{
  -ms-grid-row: 3;
  -ms-grid-column: 5;  
}
.item-5{
  -ms-grid-row: 5;
  -ms-grid-column: 1;  
}
.item-6{
  -ms-grid-row: 5;
  -ms-grid-column: 3;  
}
.item-7{
  -ms-grid-row: 5;
  -ms-grid-column: 5;  
}

Answer 2

[Вадим Кот]

CSS Grid in IE: CSS Grid and the New Autoprefixer https://css-tricks.com/css-grid-in-ie-css-grid-and...

Answer 3

[Максим Тимофеев]

Тот же caniuse говорит что частично

нет, caniuse.com говорит:

Partial support in IE refers to supporting an older version of the specification.

Что означает что поддержка есть, но старого стандарта. Чем они отличается - не задавался таким вопросом глубоко, но если Вам интересно, вот он:
https://www.w3.org/TR/2011/WD-css3-grid-layout-201...
Точно знаю что repeat() нету в старой, с остальным разбирайтесь

Comments

[NewBeHere]

да, я посмотрел перед тем как задавать вопрос, и убрал как раз-таки repeat, grid-gap, добавил префикс -ms, и тп, но видимо в 11 отображаться корректно оно не будет

[Максим Тимофеев]

NewBeHere, я когда-то пробовал и забил. А у Вас последняя версия? В мае вышла новая 11-я. Не юзал, может там что нового. Говорят он определяется как Mozilla/5.0