How to make CSS Grid Layout earned in IE11?

Guys, tell me please, how can I do to make earned the following example in IE11.
<!doctype html>
<html lang="en">
the <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>
the <body>
<div class="grid">
the <div>item 1</div>
the <div>item 2</div>
the <div>item 3</div>
the <div>item 4</div>
the <div>item 5</div>
the <div>item 6</div>
the <div>item 7</div>
the <div>item 8</div>
the <div>item 9</div>
the <div>item 10</div>
</div>
</div>
<script src="/dist/app.js"></script>
</body>
</html>
</html>

.grid {
 display: grid;

 // specify the number of columns (in this case 3) to 200px
 grid-template-columns: 200px 300px 200px;

 // specify 2 lines, 100px
 grid-template-rows: 100px 100px 200px;

 // For the remaining items not included in columns and rows:
 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;
}
}
}
March 19th 20 at 08:54
1 answer
March 19th 20 at 08:56
Solution
C ms-prefixes added properties? And IE11 is only the first version of the CSS Grid Layout, which is not all
I tried that's the way to do it (with prefixes). But the result is not the one expected.
.grid {
 display: -ms-grid;
 display: grid;

 // specify the number of columns (in this case 3) to 200px
 -ms-grid-columns: 200px 300px 200px;
 grid-template-columns: 200px 300px 200px;

 // specify 2 lines, 100px
 -ms-grid-rows: 200px 300px 200px;
 grid-template-rows: 100px 100px 200px;

 // For the remaining items not included in columns and rows:
 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;
}
}
}
- cletus_Runolfsdottir9 commented on March 19th 20 at 08:59
You need to specify the row and column for each item with an ms-prefix.
<!doctype html>
<html lang="en">
the <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>
the <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: 100px 100px 200px;

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;
}

- karen commented on March 19th 20 at 09:02
@karen, thank you so much for pomoshi. Ie I understand the flexibility of IE11 to achieve not to turn out? - cletus_Runolfsdottir9 commented on March 19th 20 at 09:05
@cletus_Runolfsdottir9, Yes. Due to the limited support in IE11. - karen commented on March 19th 20 at 09:08

Find more questions by tags CSS