Autoprefixer computing row and column numbers incorrectly

[silverAndroid]

Possibly the same as #1181 and #1241

In IE 11, even though each item was given the right row & column by default, when the .change class added, the row and columns ignore the gap given to the .container class style and assign b & c to the gaps.

Codepen: https://codepen.io/silverAndroid/pen/RwbMPpe

[ai]

Are you talking about CSS Grid? @Dan503 could help you here.

Also, check https://github.com/postcss/autoprefixer/issues/1237

[Dan503]

Nope, this is a unique issue. @ai can you re-open?

https://github.com/postcss/autoprefixer/issues/1181 = an issue with Autoprefixer handling number based grid-area declarations

https://github.com/postcss/autoprefixer/issues/1241 = An old bug that we already fixed ages ago

https://github.com/postcss/autoprefixer/issues/1237 = to do with autoplacement and taking display:none elements into account.

This issue has to do with the grid gap not inheriting when changing the grid template.

Input CSS

.container {
  display: grid;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: 
    "a b"
    "c .";
}

.container.change {
  grid-template-areas: 
      "a b"
      "c .";
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

Current output CSS

.container {
  display: -ms-grid;
  display: grid;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  -ms-grid-columns: 1fr 50px 1fr;
  grid-template-columns: repeat(2, 1fr);
  -ms-grid-rows: auto 50px auto;
      grid-template-areas: 
    "a b"
    "c .";
}

.container.change {
      grid-template-areas: 
      "a b"
      "c .";
}

.a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}

.container.change > .a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.b {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: b;
}

.container.change > .b {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.c {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: c;
}

.container.change > .c {
  -ms-grid-row: 2;  /* <= note that row is not the same as the .c row */
  -ms-grid-column: 1;
}

Expected output CSS

.container {
  display: -ms-grid;
  display: grid;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  -ms-grid-columns: 1fr 50px 1fr;
  grid-template-columns: repeat(2, 1fr);
  -ms-grid-rows: auto 50px auto;
      grid-template-areas: 
    "a b"
    "c .";
}

.container.change {
      grid-template-areas: 
      "a b"
      "c .";
}

.a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}

.container.change > .a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.b {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: b;
}

.container.change > .b {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.c {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: c;
}

.container.change > .c {
  -ms-grid-row: 3; /* <= note that row equals 3 now */
  -ms-grid-column: 1;
}