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?
Source: postcss/autoprefixer