Grid Column / Row Span for IE11

[gisu]

The autoprefixer has slight problems with changing the column widths.

Example a grid with three columns. In the first breakpoint, an element has 2 columns.

grid-gap: 10px 20px;
grid-template:
  "log met qu2" 20px
  "log lin lin" auto
  "log nav nav" auto /
  200px 1fr 110px;

In the next breakpoint, the element nav should now work on a column.

grid-gap: 10px 50px;
grid-template:
  "log met soc" 20px
  "log lin lin" auto
  "log nav qu2" auto /
  290px 1fr 110px;

The problem here is that in the second grid I have -ms-grid-column-span: 3 still from the previous breakpoint. Which means that the elements now overlap. I have now helped me manually add -ms-grid-column-span: 1 at the breakpoint.

To automate the whole thing, the autoprefixer should always note -ms-grid-column-span, even if the box is only one column wide to overwrite old values in CSS. This also applies to the -ms-grid-row-span.

[ai]

Can you show full input and output?

[gisu]

I have reduced the input and output by the most important things

// [root]__inner
&__inner {
  display: grid;

  @include break('m') {
    grid-gap: 10px 20px;
    grid-template:
      "log nav nav" auto /
        200px 1fr 110px;
  }

  @include break('l') {
    grid-gap: 10px 50px;
    grid-template:
      "log nav qu2" auto /
      290px 1fr 110px;
  }
}

// [root]__log
&__log {
  grid-area: log;
}

// [root]__nav
.c-mainnav {
  display: none;
  grid-area: nav;
  @include break(apin(2, mq)) {
    display: block;
  }
}

Output

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

@media screen and (min-width: 768px) {
  .c-pageHeader__inner {
    grid-gap: 10px 20px;
    -ms-grid-rows: auto;
    -ms-grid-columns: 200px 20px 1fr 20px 110px;
    grid-template: "log nav nav" auto / 200px 1fr 110px;
  }
}

@media screen and (min-width: 1340px) {
  .c-pageHeader__inner {
    grid-gap: 10px 50px;
    -ms-grid-rows: auto;
    -ms-grid-columns: 290px 50px 1fr 50px 110px;
    grid-template: "log nav qu2" auto / 290px 1fr 110px;
  }
}

.c-pageHeader__log {
  grid-area: log;
}

.c-pageHeader .c-mainnav {
  display: none;
  grid-area: nav;
}

@media screen and (min-width: 768px) {
  .c-pageHeader__log {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .c-pageHeader .c-mainnav {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 3;
  }
}

@media screen and (min-width: 768px) {
  .c-pageHeader .c-mainnav {
    display: block;
  }
}

.c-pageHeader .c-quicklinksDesktop {
  display: none;
  grid-area: qu2;
}

@media screen and (min-width: 1340px) {
  .c-pageHeader__log {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .c-pageHeader .c-mainnav {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .c-pageHeader .c-quicklinksDesktop {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
}

[Dan503]

Ok I get it now. Here is a simplified test case of what he's trying to say:

.grid {
  display: grid;
  grid-template-areas: "a a b";
}
@media (max-width: 600px){
  .grid {
    grid-template-areas: "a b";
  }
}
.grid-cell-A {
  grid-area: a;
}
.grid-cell-B {
  grid-area: b;
}

Current output (though I'm hand writing this)

.grid {
  display: -ms-grid;
  display: grid;
  grid-template-areas: "a a b";
}
@media (max-width: 600px){
  .grid {
    grid-template-areas: "a b";
  }
}
.grid-cell-A {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: a;
}
.grid-cell-B {
  -ms-grid-column: 3;
  grid-area: b;
}
@media (max-width: 600px){
  .grid-cell-A {
    -ms-grid-column: 1;
  }
  .grid-cell-B {
    -ms-grid-column: 2;
  }
}

Expected output

.grid {
  display: -ms-grid;
  display: grid;
  grid-template-areas: "a a b";
}
@media (max-width: 600px){
  .grid {
    grid-template-areas: "a b";
  }
}
.grid-cell-A {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: a;
}
.grid-cell-B {
  -ms-grid-column: 3;
  grid-area: b;
}
@media (max-width: 600px){
  .grid-cell-A {
    -ms-grid-column: 1;
    /* need to override the original span */
    -ms-grid-column-span: 1;
  }
  .grid-cell-B {
    -ms-grid-column: 2;
  }
}

[ai]

Fix was released in 9.1