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

The answer by Vadim is pretty much what you should do. But there are a few more CSS tricks you can use to ease your pain.

0. Be sure to read this blog post to decide whether you want to use grids for websites which support IE: https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/

If your answer to the previous question is "Yes", read on:

1. Use autoprefixer. It will replace some of the CSS-grid properties to their IE equivalent. But given how complex the grid properties can be (repeats, minmax, spans, etc), autoprefixer can't cover all cases.

2. A very trusty companion in cases when you want to write spec-compliant CSS, but still support IE is the @supports() at-rule. I use it to use the more advanced grid properties such as grid-gaps, etc:

   .card-list {
     grid-row: 4;
     grid-column: 1 / 3;
     padding: 1.5vh 1vh;
     display: grid;
     grid-template-rows: 1fr 1fr;
     grid-template-columns: 1fr 1fr;
   }
   .card {
     margin-bottom: 1vh;
   }
   .card:nth-of-type(odd) {  /* takes care of IE */
     margin-right: 1vh;
     grid-column: 1;
   }
   .card:nth-of-type(even) {
     grid-column: 2;
   }
   
   @supports(grid-gap: 1vh) { /* still using standard code! */
     .card-list {
       grid-gap: 1vh;
     }
     .card {
       margin-right: 0;
       margin-bottom: 0;
     }
   }