Move IE Grid documentation into a separate file

Author: ghostCreated May 12, 2020Updated May 16, 2021

Hi everyone, Maybe this will be a duplicate issue (I already searched in the closed issues, but I don't foud anything).

Take this piece of code (grid: no-autoplace)




  .l-values-grid {
    grid-gap: 3.5rem 2.5rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas. "value-1 value-2 value-3"
    "value-4 value-5 value-6";
  }
  
.l-values-grid>*:nth-child(1) {
  grid-area: value-1;
}

.l-values-grid>*:nth-child(2) {
  grid-area: value-2;
}

.l-values-grid>*:nth-child(3) {
  grid-area: value-3;
}

.l-values-grid>*:nth-child(4) {
  grid-area: value-4;
}

.l-values-grid>*:nth-child(5) {
  grid-area: value-5;
}

.l-values-grid>*:nth-child(6) {
  grid-area: value-6;
}
  
@media screen and (min-width: 1200px) {

  .l-values-grid {
    grid-gap: 5rem 6.5rem;
    grid-template-columns: repeat(3, 1fr);
  }

}

The first part of the code, out of the media query is translated well with the right declarations ecc. But the second part of the code is a little bit a problem where the final css output prefixed is:

@media screen and (min-width: 1200px) {
  .l-values-grid {
    grid-gap: 3.5rem 2.5rem;
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}

Instead when we add a duplicated grid-area all work good. Why autoprefixer cannot "inherit" the grid area declaration?