Xtykutl

we are trying to develop UI layout using css grid for IE-11, problem here is we have already developed the layout for all the browsers but have not tested on IE11, now we are in last stages of the application and trying to make it work for IE11 but it looks like current css is not working for IE11, so decided to write the separate css for IE11 by browser detection.
here is my mockup (trying to develop without changing the HTML -> if we change the HTML it will effect other browsers)

my question is , if you see the code i am unable to produce the required layout as shown in the mockup with out changing the html structure.

body {

  margin: 100px;

}

.box {

  background-color: #444;

  color: #fff;

  border-radius: 5px;

  padding: 20px;

  font-size: 150%;

  margin: 10px;

}



.ie-content {

  display: -ms-grid;

  display: grid;

  grid-gap: 10px;

  -ms-grid-columns: 1fr 1fr 1fr 1fr;

      grid-template-columns: 1fr 1fr 1fr 1fr;

  background-color: blueviolet;

  color: #444;

}



.ie-viewer {

   -ms-grid-column: 1;

   grid-column: 1;

  background: yellowgreen;

  -ms-grid-column-span: 3;

  grid-column: 1 / span 3;

}

.ie-viewerControls {

  -ms-grid-column: 1;

  grid-column: 1;

}

.ie-configure {

  -ms-grid-column: 4;

  grid-column: 4;

  background: red;

  height:100px;

}

<div class="ie-content">

        <div class="box ie-viewer">viewer</div>

        <div class="box ie-viewerControls">viewerControls</div>

        <div>

            <div class="box ie-configure">configure </div>

        </div>

    </div>

</div>

IE 11 has no equivalent for grid-column-gap and grid-row-gap. If you need that, you will have to add fake column/gaps like

-ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;

On top of that, each and every element in an IE 11 grid must be positioned col/row-wise, otherwise they end up stacking on top of each other in col 1/row 1.

That being said, of course you need to take the fake "gap" columns/rows into account when positioning/spanning elements.