Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS-Grid wrong ms prop values w/ media queries

See original GitHub issue

Description When a container with display: grid; changes the grid-template-areas property in a media query, children with a grid-area property will end up with values for -ms-grid-row, -ms-grid-column and -ms-grid-column-span that correspond to whichever grid-template-areas comes first, any other instances are ignored resulting in wrong placement.

Expected or desired result Depending on whether you consider this a bug, an oversight or a feature request 😉

Children with a grid-area property should be rendered once inside a new media query for each time its parent’s grid changes with MS values corresponding to these new grid values.

Example I don’t know how to add the grid: true config option to CodePen’s Autoprefixer so unfortunately, you’re going to have to try this example locally. Here’s a link to the pen anyway, in case anyone knows.

If you let Autoprefixer transpile the following code you’ll notice that the third box will have only received -ms- property values for the 768px media query and that it will still span two columns and be on a second row which no long exists above 1200px.

<div class="container">
  <div class="box boxFirst">First box</div>
  <div class="box boxSecond">Second box</div>
  <div class="box boxThird">Third box</div>
</div>

@media screen and (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "boxFirst boxSecond"
      "boxThird boxThird";
  }
}

@media screen and (min-width: 1200px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "boxFirst boxSecond boxThird";
  }
}

.box { padding: 16px; text-align: center; color: white; font-family: sans-serif; }

.boxFirst { grid-area: boxFirst; background-color: #90afc5;  }
.boxSecond { grid-area: boxSecond; background-color: #2a3132; }
.boxThird { grid-area: boxThird; background-color: #763626; }

After transpilation:

.boxThird {
  background-color: background-color: #763626;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: boxThird;
}

Expected after transpilation:

@media screen and (min-width: 768px) {
  .boxThird {
    background-color: background-color: #763626;
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-area: boxThird;
  }
}

@media screen and (min-width: 1200px) {
  .boxThird {
    background-color: background-color: #763626;
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-area: boxThird;
  }
}