Search code examples
cssinternet-explorersasscss-grid

Why would -ms-grid-row not work if it comes before grid-row?

I have some CSS classes defined like this:

  .class-1,
  .class-2 {
    grid-row: 1/2;
    -ms-grid-row: 1;
  }

and they behave as expected. However, if I swap the order of the properties, i.e. change it to

  .class-1,
  .class-2 {
    -ms-grid-row: 1;
    grid-row: 1/2;
  }

then IE doesn't see the -ms-grid-row property (according to the developer tools inspector, it's not there). Chrome sees grid-row in both cases.

Any idea why this could be or under what conditions this could happen? I've never encountered this issue before. I'm also using Sass, in case that's relevant

Solution

  • -ms-grid-row not work if it comes before grid-row?

    Because IE has grid-row property, but it is not implemented in the standard way, and the browser will take the last property it recognizes (that is the default behavior in css).

    If you want to limit -ms-grid-row only to IE and place it after you can use @support or @media (it's a hacky way) for example:

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  -ms-grid-row: 1;
}

    Will work only in IE.