I have this Css grid, with grid items, which with chrome can i easilty be centered by applying `justify-items:center` or that kind of magic. 

But this solution does not seem to work in IE, it keeps being stuck to the left side. 

<https://codepen.io/anon/pen/jjgmNX>

HTML: 

```
<div class="grid-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
</div>

```

css: 

```
.grid-container {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 20px;
    justify-items: center;
}

.item-1 {
    background-color: rgba(200,520,266,.75);
    border-color: #b4b4b4;
    grid-column: 1;
    grid-row: 1;
}

.item-2 {
    background-color: rgba(145,520,0,.75);
    grid-gap: 20px;
}

.item-3 {
    background-color: rgba(145,520,0,.75);
    grid-column: 3;
    grid-row: 1;
}

.item-4 {
    background-color: rgba(0,0,0,.25);
    border-color: transparent;
    grid-column: 2;
    grid-row: 2;
}

```

How do i center the child divs - both supported in IE and chrome ?