[css-grid] Autoprefixer outputting wrong IE grid-span syntax

[dave-cross]

trafficstars

As mentioned in #1064, I'm seeing similar behaviour with span x not prefixing correctly with grid-gap.

When declaring grid-area: 1 / 2 / 1 / span 4;, it is being prefixed to the following:

    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 4;
    grid-area: 1 / 2 / 1 / span 4;

But -ms-grid-column-span: 4; should actually be -ms-grid-column-span: 7; to account for the grid gaps.

Test case: https://codepen.io/davecross/pen/ce7e08421ea29a8464ff82b84fcc7d12?editors=1100

[Dan503]

Here is a cleaner reduced test case of the problem:

Input CSS

.grid {
  display: grid;
}

.grid--2col {
  grid-gap: 20px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas: "a a a a a a b b b b b b";
}

.grid--2col > .a {
  grid-area: a;
}

.grid--2col > .b {
  grid-area: b;
}

@media (min-width: 376px) {
  .grid--2col .smaller {
    grid-area: 1 / 2 / 1 / span 4;
  }
}

Current output CSS

.grid {
  display: -ms-grid;
  display: grid;
}

.grid--2col {
  grid-gap: 20px;
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
  grid-template-columns: repeat(12, 1fr);
      grid-template-areas: "a a a a a a b b b b b b";
}

.grid--2col > .a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 11;
  grid-area: a;
}

.grid--2col > .b {
  -ms-grid-row: 1;
  -ms-grid-column: 13;
  -ms-grid-column-span: 11;
  grid-area: b;
}

@media (min-width: 376px) {
  .grid--2col .smaller {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 4;
    grid-area: 1 / 2 / 1 / span 4;
  }
}

expected output

.grid {
  display: -ms-grid;
  display: grid;
}

.grid--2col {
  grid-gap: 20px;
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
  grid-template-columns: repeat(12, 1fr);
      grid-template-areas: "a a a a a a b b b b b b";
}

.grid--2col > .a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 11;
  grid-area: a;
}

.grid--2col > .b {
  -ms-grid-row: 1;
  -ms-grid-column: 13;
  -ms-grid-column-span: 11;
  grid-area: b;
}

@media (min-width: 376px) {
  .grid--2col .smaller {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 7; /* <= Note the 7 here instead of 4 */
    grid-area: 1 / 2 / 1 / span 4;
  }
}

[burtek]

What's the status of this? @ai

[ai]

@burtek waiting for PR from someone

[burtek]

@ai I'll try to understand how this works and maybe I'll be able to craft one, but don't take that for granted just yet

[ai]

You should check grid related files in lib/hacks. Sorry, I have no idea how to fix it exactly (need to work on different projects this week).

[burtek]

Sorry, I have no idea how to fix it exactly (need to work on different projects this week).

I feel you, man.

Will give it a try in a few days