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:
This is how it looks in IE11 :(
(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;
}
xxxmatko :
Change your css and use flex, like this:\n\n.layout-grid {\n display: flex;\n}\n\n.layout-grid > .box {\n flex: 1;\n}\n",
2018-02-22T08:49:08