Adjusting spacing between Flexbox items in IE while using Grid Layout for other browsers

Question

Given that IE doesn't fully support Grid Layout, I'm using Flexbox for Internet Explorer only, and using Grid Layout for other browsers.

Is there a way to add margin/padding to flex items on IE only, and have this not affect Grid Layout items?

Right now, there's no space between flexbox items - I know normally you'd add margin or padding to ".grid article", but that doesn't work in this case b/c that'd add margin or padding to Grid items, too (in Grid Layout in Chrome, for example).

.grid {
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  display: grid;
  justify-content: start; 
  margin-top: -20px;

} 


.grid article {
  -ms-flex: 0 0 250px;
}


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

}



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

  }    
   <div class="grid> 

   <article> 
    <a href="#">
   <div>Sample content goes here</div> 
    </a>
  </article> 

   <article> 
    <a href="#">
   <div>Sample content goes here</div> 
    </a>
  </article> 

   <article> 
    <a href="#">
   <div>Sample content goes here</div> 
    </a>
  </article> 

   <article> 
    <a href="#">
   <div>Sample content goes here</div> 
    </a>
  </article> 

</div> 

Answer 1

Please try to use the following methods to solve this issue:

Method 1: You can add justify-content to the .grid to allow each element in IE to maintain spacing. It is used to set or retrieve the alignment of the elastic box elements in the main axis (horizontal axis) direction:

.grid {
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    display: grid;
    justify-content: start;
    margin-top: -20px;
    justify-content: space-between; /*add this line*/
}

Method 2: You can use media queries to target IE in CSS like below, then the style in the media queries will only apply on IE 11 and the style outside will apply on all the browsers:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS */
    .grid article {
        -ms-flex: 0 0 250px;
        margin-right: 225px;
    }
}

.grid article {
    -ms-flex: 0 0 250px;
}