Home:ALL Converter>Avoid overlapping item with CSS grid (in IE11)

Avoid overlapping item with CSS grid (in IE11)

Ask Time:2018-08-23T17:19:58         Author:Alexandre SIRKO

Json Formatter

I've the simplest CSS Grid possible

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
      grid-template-columns: 1fr 1fr;
}

.cell {
  border: 1px solid black;
}

Here, a working example.

On major browser, it works as expected but in Internet Explorer 11, the grid elements are overlapping.

Is there a way (without turning them to flex) to fix that issue on IE11 ?

Author:Alexandre SIRKO,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/51982343/avoid-overlapping-item-with-css-grid-in-ie11
yy