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

Transforming new CSS Grid layout syntax to outdated IE's is really a challenge. It's not just a matter of adding some vendor prefixes.

IE has very limited support of what is present in the new version of CSS Grid Layout. There is no IE support of

• auto-placement and selecting its flow (grid-auto-flow CSS property);
• repeated columns/rows (repeat function and some special values like auto-fill and auto-fit). In some cases this mean that you'll just have to replace with explicit values, like in your case, you can replace grid-template-columns: repeat(4, 1fr) with -ms-grid-columns: 1fr 1fr 1fr 1fr and this will work perfectly. But if you have something like grid-template-columns: repeat(auto-fill, 1fr) it's impossible to implement this in IE;
• grid cell gaps (grid-row-gap, grid-column-gap, grid-gap CSS properties). Gaps can be faked using additional grid tracks;
• automatically generated tracks (grid-auto-columns, grid-auto-rows CSS properties);
• named grid areas (grid-area, grid-template-areas CSS properties).

You just have to forget about this possibilities for IE.

Also some values of supported IE properties are not supported

Autoplacement

There is no auto-placement behavior in IE implementation. This means that you have to position everything rather than use the auto-placement ability of grid.

If you don’t position items they will stack up in the first cell of the grid. That means that you have to set a position explicitly for every single grid item or it will reside in the first cell. If you have markup like this:

.wrapper {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-columns: 50px 50px;
  grid-template-columns: 50px 50px;
  -ms-grid-rows: 50px 50px;
  grid-template-rows: 50px 50px;
  background-color: #fff;
  color: #444;
}

.box {
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

  
A
  
B
  
C
  
D

You'll see something this in IE

---

So basically you have two options (methodologies) when developing CSS Grid for IE (if you know that the layout in your case can be transformed):

• Generate different markup for IE browser and other browsers. In this case you don't care about markup similarity (by the way your value of grid-template-rows: repeat(150px, 50px) is invalid, so I assume you wanted grid-template-rows: 150px 50px). Demo for your case

  .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 150px 50px;
    grid-gap: 1vw;
    
    display: -ms-grid;
    /* also faking 1vw grid-gap */
    -ms-grid-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
    /* also faking 1vw grid-gap */
    -ms-grid-rows: 150px 1vw 50px;
  }
  
  .grid-item {
    /* style just for demo */
    background-color: yellow;
  }
  
  /* Explicit placement for IE */
  /* Omitting default value of -ms-grid-column: 1 and -ms-grid-row: 1 where possible */
  .grid-item:nth-child(2) {
    -ms-grid-column: 3;
  }
  
  .grid-item:nth-child(3) {
    -ms-grid-column: 5;
  }
  
  .grid-item:nth-child(4) {
    -ms-grid-column: 7;
  }
  
  .grid-item:nth-child(5) {
    -ms-grid-row: 3;
  }
  
  .grid-item:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  
  .grid-item:nth-child(7) {
    -ms-grid-row: 3;
    -ms-grid-column: 5;
  }
  
  .grid-item:nth-child(8) {
    -ms-grid-row: 3;
    -ms-grid-column: 7;
  }

  
    
  1,1
    
  1,2
    
  1,3
    
  1,4
    
  2,1
    
  2,2
    
  2,3
    
  2,4
  

• Generate very similar markup for IE browsers. In this case, markup for all browsers will look very similar. This might be more maintainable because you shouldn't care about different approaches. Demo for your case:

  .container {
    display: -ms-grid;
    display: grid;
    /* also faking 1vw grid-gap */
    -ms-grid-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
    grid-template-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
    /* also faking 1vw grid-gap */
    -ms-grid-rows: 150px 1vw 50px;
    grid-template-rows: 150px 1vw 50px;
  }
  
  .grid-item {
    /* style just for demo */
    background-color: yellow;
  }
  
  .grid-item:nth-child(2) {
    -ms-grid-column: 3;
    grid-column: 3;
  }
  
  .grid-item:nth-child(3) {
    -ms-grid-column: 5;
    grid-column: 5;
  }
  
  .grid-item:nth-child(4) {
    -ms-grid-column: 7;
    grid-column: 7;
  }
  
  .grid-item:nth-child(5) {
    -ms-grid-row: 3;
    grid-row: 3;
  }
  
  .grid-item:nth-child(6) {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 3;
    grid-column: 3;
  }
  
  .grid-item:nth-child(7) {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 5;
    grid-column: 5;
  }
  
  .grid-item:nth-child(8) {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 7;
    grid-column: 7;
  }

  
    
  1,1
    
  1,2
    
  1,3
    
  1,4
    
  2,1
    
  2,2
    
  2,3
    
  2,4