Search code examples
cssinternet-explorer-11css-grid

CSS Grid - IE 11 Overlap

This question has been asked before here, and was even marked as a duplicate, but there was no explanation or answer that would actually solve the problem of the person that asked the question, so I'm trying again, since everybody says that IE 11 supports css-grid if used correctly.

I have the most basic CSS-Grid in which I also use the -ms- prefixes, but for some reason, in IE 11 the Grid-Elements will be placed on top of eachother instead of the expected behaviour.

Here is a basic grid where you can see the Problem

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

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

.cell {
  border: 1px solid black;
}

http://jsbin.com/wuxaridabo/1/edit

Internet Explorer 11 - Grid-overlap problem

Solution

  • You need to position every element by hand using -ms-grid-row and -ms-grid-column

    .calendar > div:nth-of-type(1){
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.calendar > div:nth-of-type(2){
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}