CSS: display: grid and/or -ms-grid

Question

Is there a way to use both or either display: grid/-ms-grid into one style sheet or do I have to use an HTML hack or JavaScript to query what type of browser a

Answer 1

Your display rule needs to be structured correctly. What you have is invalid.

display: grid -ms-grid;

Also, your grid-template-rows rule is invalid. The first argument is supposed to be an integer that specifies the number of repetitions.

grid-template-rows: repeat(150px, 50px);

Also, I don't believe the repeat() notation existed in the older specs. It looks like it was introduced in the current spec, so IE wouldn't support it.

-ms-grid-columns: repeat(4, 1fr);
-ms-grid-rows: repeat(150px, 50px);

Lastly, it's best to put the official (W3C) properties after the prefixed versions so they are given priority in the cascade (more details).

Try this:

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

  -ms-grid-columns: 1fr 1fr 1fr 1fr;           
  grid-template-columns: repeat(4, 1fr);

  -ms-grid-rows: 150px 50px;
  grid-template-rows: 150px 50px;

  -ms-grid-gap: 1vw;
  grid-gap: 1vw;
}