Title: CSS Grid not workiing on IE11 or Edge even with -ms prefix
Tags: css;internet-explorer-11;microsoft-edge;css-grid
Question: I've been following the guide here on getting grids working on IE 11. My problem is that even following those rules, the columns and rows just overlap each other rather than taking their grid positions.
Here's a simple code example that would cause the problem:
<div class="grid"&gt;
<div&gt;Top Left</div&gt;
<div&gt;Top Right</div&gt;
<div&gt;Bottom Left</div&gt;
<div&gt;Bottom Right</div&gt;
</div&gt;
.grid {
display: -ms-grid;
-ms-grid-columns: 200px 200px;
-ms-grid-rows: 200px 200px;
And here's a codepen link to it:
https://codepen.io/anon/pen/pdNWMj
Am I getting this code wrong, or should I be using something other than the ms implementation of grid?

Here is the accepted answer: You must use -ms-grid-column and -ms-grid-row to specify for each child where it is in the grid.
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 200px 200px;
-ms-grid-rows: 200px 200px;
grid-template-columns: 200px 200px;
grid-template-rows: 200px 200px;
.top-left {
-ms-grid-column: 1;
-ms-grid-row: 1;
.top-right {
-ms-grid-column: 2;
-ms-grid-row: 1;
.bottom-left {
-ms-grid-column: 1;
-ms-grid-row: 2;
.bottom-right {
-ms-grid-column: 2;
-ms-grid-row: 2;
<div class="grid"&gt;
<div class="top-left"&gt;Top Left</div&gt;
<div class="top-right"&gt;Top Right</div&gt;
<div class="bottom-left"&gt;Bottom Left</div&gt;
<div class="bottom-right"&gt;Bottom Right</div&gt;
</div&gt;
https://codepen.io/anon/pen/ZaBaVa
Not as convenient as the other browsers...
Hoping this helps though ;)
Comment for this answer: Thank you so much. I had already tried this, but thinking back I must have accidentally started my indexes at 0 instead of 1.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:11/08/17', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<css><internet-explorer-11><microsoft-edge><css-grid>', 'Title': 'CSS Grid not workiing on IE11 or Edge even with -ms prefix', 'ViewCount': 1539, 'id': 47180756, 'user_AboutMe': None, 'user_AccountId': 9363176.0, 'user_DisplayName': 'Alex', 'user_Reputation': 633.0, 'user_Views': 56.0, 'user_id': 6948906.0}}