Как сделать, чтобы CSS Grid Layout заработал в IE11?

Question

darktowerk56c @darktowerk56c

CSS

Как сделать, чтобы CSS Grid Layout заработал в IE11?

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/dist/app.css">
  <title>Document</title>
</head>
<body>
<div class="grid">
  <div>item-1</div>
  <div>item-2</div>
  <div>item-3</div>
  <div>item-4</div>
  <div>item-5</div>
  <div>item-6</div>
  <div>item-7</div>
  <div>item-8</div>
  <div>item-9</div>
  <div>item-10</div>
</div>
</div>
<script src="/dist/app.js"></script>
</body>
</html>
</html>

.grid {
  display: grid;

  // указываем количество колонок (в данном случае 3) по 200px
  grid-template-columns: 200px 300px 200px;

  // указываем 2 строки по 100px
  grid-template-rows: 200px 100px 100px;

  // Для оставшихся элементов, не включенных в столбцы и строки:
  grid-auto-rows: 50px;

  background-color: lightgray;

  div {
    background-color: #1b67a8;
    border: 1px solid #212941;
    border-radius: 5px;
    padding: 8px 15px;
    color: #ffffff;
    font-size: 18px;

    &:nth-child(odd) {
      background-color: #1ac66c;
    }
  }
}

Вопрос задан более трёх лет назад
442 просмотра

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

4 комментария

darktowerk56c @darktowerk56c Автор вопроса

Я пробовал вот таким способом сделать (с префиксами). Но результат совсем не тот, который ожидался.

.grid {
  display: -ms-grid;
  display: grid;

  // указываем количество колонок (в данном случае 3) по 200px
  -ms-grid-columns: 200px 300px 200px;
  grid-template-columns: 200px 300px 200px;

  // указываем 2 строки по 100px
  -ms-grid-rows: 200px 300px 200px;
  grid-template-rows: 200px 100px 100px;

  // Для оставшихся элементов, не включенных в столбцы и строки:
  grid-auto-rows: 50px;

  background-color: lightgray;

  div {
    background-color: #1b67a8;
    border: 1px solid #212941;
    border-radius: 5px;
    padding: 8px 15px;
    color: #ffffff;
    font-size: 18px;

    &:nth-child(odd) {
      background-color: #1ac66c;
    }
  }
}

Написано более трёх лет назад

Анатолий @t0lik
Нужно указывать ряд и колонку для каждого элемента с ms-префиксом.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="1.css"> <title>Document</title> </head> <body> <div class="grid"> <div class="item1">item-1</div> <div class="item2">item-2</div> <div class="item3">item-3</div> </div> </div> </body> </html> </html>

.grid {
display: -ms-grid;
display: grid;

-ms-grid-columns: 200px 300px 200px;
grid-template-columns: 200px 300px 200px;

-ms-grid-rows: 200px 300px 200px;
grid-template-rows: 200px 100px 100px;

grid-auto-rows: 50px;

background-color: lightgray;
}
.item1 {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.item2 {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
.item3 {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
div {
background-color: #1b67a8;
border: 1px solid #212941;
border-radius: 5px;
padding: 8px 15px;
color: #ffffff;
font-size: 18px;
}
div&:nth-child(odd) {
background-color: #1ac66c;
}
Написано более трёх лет назад
darktowerk56c @darktowerk56c Автор вопроса

t0lik, Большое спасибо за поммощь. Т.е. я верно понимаю гибкости с IE11 добиться не получиться?

Написано более трёх лет назад
Анатолий @t0lik

darktowerk56c, Да. В силу ограниченной поддержки в IE11.

Написано более трёх лет назад