-ms-grid-columns составляет столбцы

Question

Это CSS, который в настоящее время использует моя сетка:

.projectStatusCountGrid {
    display: grid;
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: repeat(10, 1fr);
}

Вот как на самом деле выглядит моя сетка в IE11:

Однако, когда я проверяю это, обнаруживается, что все столбцы сетки находятся там... они просто сложены в одном месте. Что мне нужно добавить, чтобы исправить это, что не повлияет ни на что в браузерах с современными функциями?

Answer 1

IE не знает, где разместить столбцы, если вы не скажете это. Вот почему они сложены друг на друга. Для каждого div внутри вашего display: grid контейнер, укажите столбец:

.projectStatusCountGrid div:nth-of-type(1) {
  -ms-grid-column: 1;
}

...

.projectStatusCountGrid div:nth-of-type(12) {
  -ms-grid-column: 12;
}