Why css grid is not working in IE & Edge?

Question

I'm doing a grid with an structure like this:

I have the next very basic code: https://codepen.io/anon/pen/PEpYoy

.grid-list {
 padding: 0;
 display: -ms-grid;
 display: grid;
 list-style: none;
 -ms-grid-columns: 1fr 1fr 1fr 1fr;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-auto-rows: 1fr;
 grid-gap: 0.625rem;
}

.grid-list li a {
  background-color: 
 border-width: 1px;
 border-style: solid;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 height: 100%;
 transition: border-color .2s ease-out;
 padding: 3px;
 padding: 0.1875rem;
}

<ul class="grid-list">
 <li>
  <a href="http://www.google.com/">
   <h3>1</h3>
  </a>
 </li>
 <li>
  <a href="http://www.google.com/">
   <h3>2</h3>
  </a>
 </li>
 <li>
  <a href="http://www.google.com/">
   <h3>3</h3>
  </a>
 </li>
 <li>
  <a href="http://www.google.com/">
   <h3>4</h3>
  </a>
 </li>
 <li>
  <a href="http://www.google.com/">
   <h3>5</h3>
  </a>
 </li>
 <li>
  <a href="http://www.google.com/">
   <h3>6</h3>
  </a>
 </li>
 <li>
  <a href="http://www.google.com/">
   <h3>7</h3>
  </a>
 </li>
 <li>
  <a href="http://www.google.com/">
   <h3>8</h3>
  </a>
 </li>
</ul>

if we see it in chrome/firefox it works fine but if we open it in IE or Edge the grid is being overlapping like this:

Any idea about this?

Answer 1

CSS Grid is only partially supported for IE v11 and Edge 15. This structure is highly experimental, so use with caution.

People have found ways to use flex as a fallback, yet even this solution can be volatile for older browsers. codepen demo

@supports not (display: grid) {
.grid {
    display: flex;
    flex-flow: row wrap;
    ...
}