Search code examples
cssinternet-explorer-11grid-layoutcss-grid

CSS Grid Layout: Overlapping in IE11

There are quite a few grid problems with IE11 (of course), but I have not seen this one yet.

The issue is simple, instead of showing the grid items nearby each other, they are displayed on top of each other, as if they were positioned absolute?

Here is the example: https://dev.meteo.cam/detail

This is how it looks in modern browsers: enter image description here

This is how it looks in IE11 :( enter image description here (If you select the elements in the inspector, you'll see that the weather image box is overlapped by the weather data box)

This is the CSS code:

.layout-grid {
    display: -ms-grid;
    display: grid;
    grid-gap:2em;
    padding: 2em;
}
.layout-grid-5050 {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
}
Solution

  • I modified the answer from @xxxmatko and added a surrounding 2em gap.

    .layout-grid {
  display: flex;
  padding-top:2em;
  padding-left:2em;
}

.layout-grid > .box {
  flex-basis: 50%;
  margin-right:2em;
  margin-bottom:2em;
}