title: Adjusting spacing between Flexbox items in IE while using Grid Layout for other browsers
body: <p>Given that IE doesn't fully support Grid Layout, I'm using Flexbox for Internet Explorer only, and using Grid Layout for other browsers.</p>
  <p>Is there a way to add margin/padding to flex items on IE only, and have this not affect Grid Layout items?</p>
  <p>Right now, there's no space between flexbox items - I know normally you'd add margin or padding to  &quot;.grid article&quot;, 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).</p>
  <pre><code>.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;
    } 
  
    }    
     &lt;div class=&quot;grid&gt; 
  
     &lt;article&gt; 
      &lt;a href=&quot;#&quot;&gt;
     &lt;div&gt;Sample content goes here&lt;/div&gt; 
      &lt;/a&gt;
    &lt;/article&gt; 
  
     &lt;article&gt; 
      &lt;a href=&quot;#&quot;&gt;
     &lt;div&gt;Sample content goes here&lt;/div&gt; 
      &lt;/a&gt;
    &lt;/article&gt; 
  
     &lt;article&gt; 
      &lt;a href=&quot;#&quot;&gt;
     &lt;div&gt;Sample content goes here&lt;/div&gt; 
      &lt;/a&gt;
    &lt;/article&gt; 
  
     &lt;article&gt; 
      &lt;a href=&quot;#&quot;&gt;
     &lt;div&gt;Sample content goes here&lt;/div&gt; 
      &lt;/a&gt;
    &lt;/article&gt; 
  
  &lt;/div&gt; 
  </code></pre>