How to align grid to the center of the grid block itself in IE11 browser?

N

nastya_guk2021-04-11 09:39:38

Internet Explorer

nastya_guk, 2021-04-11 09:39:38

Good afternoon.
There is a grid block:

<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="conteiner">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

*{
    margin: 0;
    padding: 0;
}

.conteiner{
    border: grey 3px solid;
    margin: 0 auto;
    display: -ms-grid;
    display: grid;
    grid-template: auto / auto auto auto;
    width: 900px;
    height: 700px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    justify-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    
}
.item{
       
        margin: 15px;
        width: 200px;
    height: 200px;
    background: green;
}





.item:nth-child(1) {
    -ms-grid-column: end;
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}
.item:nth-child(2) {
    
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}
.item:nth-child(3) {
    
  -ms-grid-column: 3;
  -ms-grid-row: 1;
}
.item:nth-child(4) {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}
.item:nth-child(5) {
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}
.item:nth-child(6) {
  -ms-grid-column: 3;
  -ms-grid-row: 2;
}

I know that for the normal behavior of grid in the IE browser, you need to specify the position of each element of the grid. It works.

But here's how to align elements along the axes in IE?
In other browsers everything works

Please help. Thanks