Making Grid Layout work in Internet Explorer

Question

I'm trying to make grid layout work in IE. It's a fairly simple grid layout, I think, that uses grid-template-columns: repeat(auto-fit, minmax(#px, 1fr)) along with grid row/column gap.

I tried the following but it didn't work on IE11 and IE9.

.grid {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start; 
  margin-top: -20px;
} 

I'm sharing my code below.

CSS code

.grid {
  display: grid;
  justify-content: start; 
  margin-top: -20px;
}


@media (min-width: 800px) {
  .grid {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  grid-row-gap: 70px;
  grid-column-gap: 40px;
  } 
}


@media (min-width: 600px) and (max-width: 799px) {
  .grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-row-gap: 40px;
  grid-column-gap: 30px;
  margin-top: -15px;
  } 
}


@media (max-width: 599px) {
  .grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-row-gap: 40px;
  grid-column-gap: 20px;
  margin-top: 18px;
  } 
}


.grid .photo {
  width: 100%;
  background-size: contain;
  background-position: center;
}

.grid .photo:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.grid a {
  display: block;
  text-decoration: none;
  color: inherit;

}

HTML code

<div class="grid">

  <article> 
    <a href="#">
      <div class="photo" style="background-image: url(https://i.stack.imgur.com/qxeUf.jpg?s=96&g=1;"></div>
    </a>
  </article> 
  
    <article> 
    <a href="#">
      <div class="photo" style="background-image: url(https://www.gravatar.com/avatar/a235706e3d81b614acaec3368edfea4b?s=96&d=identicon&r=PG;"></div>
    </a>
  </article> 
  
    <article> 
    <a href="#">
      <div class="photo" style="background-image: url(https://i.stack.imgur.com/qxeUf.jpg?s=96&g=1;"></div>
    </a>
  </article> 
  
      <article> 
    <a href="#">
      <div class="photo" style="background-image: url(https://www.gravatar.com/avatar/a235706e3d81b614acaec3368edfea4b?s=96&d=identicon&r=PG;"></div>
    </a>
  </article> 
  
  </div>

Many thanks in advance