3

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 ?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Alexandre SIRKO
  • 816
  • 11
  • 22

1 Answers1

2

The problem basically boils down to the fact that IE doesn't do auto-placement like every other browser. Unless you tell it where you want each element within the grid, it will assume you want everything in column 1 row 1. If this is a dynamic website you are better off with flexbox. If its like your example and you know where each element is to go then you have to say so like so:

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

.cell {
  border: 1px solid black;
}

.cell:first-of-type{
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-column-span: 1;
  }

.cell:last-of-type{
  -ms-grid-column: 2;
  -ms-grid-row: 1;
  -ms-grid-column-span: 1;
  }
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="grid">
  <div class="cell">a</div>
  <div class="cell">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b</div>
</div>
</body>
</html>

All that being said if you really need IE support you should probably stick to flexbox. They just do not get along.

UPDATE: I recently stumbled upon an article outlining how Autoprefixer, if set up correctly, will do the grunt work for you if you are doing a grid-template-areas sort of thing. still no auto-placement but it does save you some time if you are making a template and are placing the elements anyway. Read This Article

TaterOfTots
  • 148
  • 5