title: CSS Grid - IE 11 Overlap
body: <p>This question has been asked before here, and was even marked as a duplicate, but there was no explanation or answer that would actually solve the problem of the person that asked the question, so I'm trying again, since everybody says that IE 11 supports css-grid if used correctly.</p>
  
  <p>I have the most basic CSS-Grid in which I also use the -ms- prefixes, but for some reason, in IE 11 the Grid-Elements will be placed on top of eachother instead of the expected behaviour. </p>
  
  <p>Here is a basic grid where you can see the Problem</p>
  
  <pre><code>.grid {
    display: -ms-grid;
    display: grid;
  
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 1fr 1fr;
  }
  
  .cell {
    border: 1px solid black;
  }
  </code></pre>
  
  <p><a href="http://jsbin.com/wuxaridabo/1/edit" rel="noreferrer">http://jsbin.com/wuxaridabo/1/edit</a></p>
  
  <p><a href="https://i.stack.imgur.com/IV4M8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/IV4M8.png" alt="Internet Explorer 11 - Grid-overlap problem"></a></p>