Items in Css Grid in IE superimposed on each other

Question

Items in Css Grid in IE 11 superimposed on each other. Everything work fine in Chrome, FF and Safari, but not IE 11.

Chrome:

IE:

Code:

.content-item__image {
  height: 210px;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.content-item__description {
  padding: 16px 28px;
}

.content-grid {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  -ms-grid-rows: 1fr 1fr;
  grid-gap: 1rem;
}

<div class="content-grid">
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
</div>

What could be the problem and the ways to solve it? Will be grateful for any help.

Answer 1

In your case the CSS Grid is not the good solution. Flexbox is way more short, responsive out of the box, working in IE / Edge (with some Autoprefixer (1, 2) & some minor manual adjustments).

However there is a solution for spread the grid elements using just CSS Grid tools, to avoid nth-child and @media IE detection.

Here is the very detailed explanation.

Basically you have to define the grid via grid-template and then explicilty assign each grid element placement via grid-area.

The article make it clear in very details including vendor prefixes you have to use.

Answer 2

First of all. Bad news is - it happens on Edge too. So it's a problem on IE and Edge browsers which is not good since Edge seems to be pretty modern browser now (EDIT: MS Edge finally fully supports CSS grid [version 16+]). According to Microsoft documentation it should work OK... but it doesn't. Have tried some -ms prefix fixes but it's still broken and it looks really bad. It seems css grid doesn't have a good implemention on those browsers. Let's think how we can fix that, so the page would look OK for IE/Edge users.

---

Basic Problem Explanation

The items are superimposed on each other because in IE and Edge grid items are always stacked in first cell. If you know exactly number of items you can easly fixed it using one of css grid property:

.content-item:nth-child(2) {
    -ms-grid-column: 2;
}

.content-item:nth-child(3) {
    -ms-grid-column: 3;
}

and so on... The problem is when the content is dynamic and you don't know how many items is going to appear in the grid parent element.

---

Conditional Comments in HTML

I used to use conditional comments to serve special CSS file only for IE browser.

<!--[if IE ]>
  <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

But it won't help you anymore. Conditional statements in HTML are not supported by Internet Explorer nor Edge since IE10. Too bad this solution will cover only IE9 and below.

---

The working solution! (CSS only)

The one method to fix the problem on Microsoft browsers is to use @supports or @media queries to catch the proper browser.

To get only IE use

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    Grid fixes for IE goes here...
}

To get the Edge browser only, use

@supports (-ms-ime-align: auto) {
    Grid fixes for Edge goes here...
}

More about @supports directive - here . Unfortunately you can't use @supports to catch the IE because it doesn't support it - caniuse. We are selecting Edge by -ms-ime-align property because this property is supported by Edge only so it's safe to use it.

---

Hope it helps. Here is the working DEMO.