Why is grid row span not being accepted for "blank1" in IE 11

Question

The Third grid item "blank1" should row span and cover both row 1 and row 2 of column 3, but it is not working in IE 11. It is only covering the first row.

Here is a link to the file online. Look at it in Firefox and it will show what it is suppose to look like. IE 11 need fixing.

.wrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 300px 300px 300px;
    grid-template-columns: 300px 300px 300px;
    -ms-grid-rows: 200px 200px 200px 200px;
    grid-template-rows: 200px 200px 200px 200px;
    background-color: #fff;
}
.wrapper > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}    
.wrapper > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}    
.wrapper > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}    
.wrapper > *:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}    
.wrapper > *:nth-child(5) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}    
.wrapper > *:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
}    
.wrapper > *:nth-child(7) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}    
.wrapper > *:nth-child(8) {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
}    
.wrapper > *:nth-child(9) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}    
.wrapper > *:nth-child(10) {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
}   
.wrapper > *:nth-child(11) {
    -ms-grid-row: 4;
    -ms-grid-column: 2;
}    
.wrapper > *:nth-child(12) {
    -ms-grid-row: 4;
    -ms-grid-column: 3;
}
.box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;
}
.print {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-span: 1;
    grid-column-end: 2;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-span: 1;
    grid-row-end: 2;
    background-color:white;
}
.ad {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-column-span: 1;
    grid-column-end: 3;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-span: 1;
    grid-row-end: 2;
    background-color:234;        
}
.blank1 {
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-column-span: 1;
    grid-column-end: 4;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-span: 2;
    grid-row-end: 3;
    background-color:678;        
}
.search {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-span: 1;
    grid-column-end: 2;
    -ms-grid-row: 2;
    grid-row-start: 2;
    -ms-grid-row-span: 1;
    grid-row-end: 3;
    background-color:white;        
}
.logo {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-column-span: 1;
    grid-column-end: 3;
    -ms-grid-row: 2;
    grid-row-start: 2;
    -ms-grid-row-span: 1;
    grid-row-end: 3;
    background-color:678;        
}
.menu {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-span: 1;
    grid-column-end: 2;
    -ms-grid-row: 3;
    grid-row-start: 3;
    -ms-grid-row-span: 1;
    grid-row-end: 4;
    background-color:789;        
}
.content {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-column-span: 1;
    grid-column-end: 3;
    -ms-grid-row: 3;
    grid-row-start: 3;
    -ms-grid-row-span: 1;
    grid-row-end: 4;
    background-color:567;
}
.rightside {
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-column-span: 1;
    grid-column-end: 4;
    -ms-grid-row: 3;
    grid-row-start: 3;
    -ms-grid-row-span: 2;
    grid-row-end: 5;
    background-color:orange;
}
.blank2 {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-span: 1;
    grid-column-end: 2;
    -ms-grid-row: 4;
    grid-row-start: 4;
    -ms-grid-row-span: 1;
    grid-row-end: 5;
    background-color:red;
}
.footer {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-column-span: 1;
    grid-column-end: 3;
    -ms-grid-row: 4;
    grid-row-start: 4;
    -ms-grid-row-span: 1;
    grid-row-end: 5;
    background-color:289;
}

<div class="wrapper">
    <div class="box print">print</div>
    <div class="box ad">ad</div>
    <div class="box blank1">blank1</div>
    <div class="box search">search</div>
    <div class="box logo">logo</div>
    <div class="box menu">menu</div>
    <div class="box content">content</div>
    <div class="box rightside">right side</div>
    <div class="box blank2">blank2</div>
    <div class="box footer">footer</div>
</div>

https://www.survival-manual.com/test/test-ie.php

I don't see any problem on a cursory review. Have you checked here: https://stackoverflow.com/q/45786788/3597276 — Michael Benjamin, Apr 22 '19 at 16:57
I looked at that post. It says that span is not supported by IE. The code I am using has the ms prefix and that was inserted into the code by an auto generated code app. I would not have thought that it would generate code for ie that isn't accepted by ie??? Going see what the work around for row span is suppose to be for ie. — Mike Guerin, Apr 22 '19 at 17:04
I don't understand! This is how I found to span two rows in ie 11. -ms-grid-row-span: 2; That is what I have in the code but it is not working. — Mike Guerin, Apr 22 '19 at 17:15

Mike Guerin · Accepted Answer · 2019-04-24T17:33:06.010

I fixed the issue with a work around. Doesn't really solve why the original code wasn't working, but accomplishes what I was trying to do.

I simple added another div. Instead of trying to span two rows with one div. I simple made another div to go below the first.

Clarification. I added css grid markup to place it in column 3, row 2. where another div was suppose to span down into it.

<div class="wrapper">
<div class="box print"><?php include($_SERVER["DOCUMENT_ROOT"] . "/php-includes/grid-print.php"); ?></div>
<div class="box ad">ad</div>
<div class="box blank1">blank1</div>
<div class="box search"><?php include($_SERVER["DOCUMENT_ROOT"] . "/php-includes/grid-search.php"); ?></div>
<div class="box logo">logo</div>
<div class="box blank2">blank2</div>
<div class="box menu">menu</div>
<div class="box content">content</div>
<div class="box rightside">right side</div>
<div class="box blank3">blank3</div>
<div class="box footer">footer</div>
</div>

Csaba Farkas · Answer 2 · 2019-04-22T18:32:36.983

I think your nth child selectors, where you specify your -ms-grid prefixed properties are not in line with your class selectors. Can you try this code below?

    body {
        margin: 0px;
    }


    .wrapper {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 300px 300px 300px;
        grid-template-columns: 300px 300px 300px;
        -ms-grid-rows: 200px 200px 200px 200px;
        grid-template-rows: 200px 200px 200px 200px;
        background-color: #fff;

    }

    .wrapper>*:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;

    }

    .wrapper>*:nth-child(2) {
        -ms-grid-row: 2;
        -ms-grid-column: 2;

    }

    .wrapper>*:nth-child(3) {
        -ms-grid-row: 1;
        -ms-grid-column: 3;

    }

    .wrapper>*:nth-child(4) {
        -ms-grid-row: 2;
        -ms-grid-column: 1;

    }

    .wrapper>*:nth-child(5) {
        -ms-grid-row: 2;
        -ms-grid-column: 2;

    }

    .wrapper>*:nth-child(6) {
        -ms-grid-row: 3;
        -ms-grid-column: 1;

    }

    .wrapper>*:nth-child(7) {
        -ms-grid-row: 3;
        -ms-grid-column: 2;

    }

    .wrapper>*:nth-child(8) {
        -ms-grid-row: 3;
        -ms-grid-column: 3;

    }

    .wrapper>*:nth-child(9) {
        -ms-grid-row: 4;
        -ms-grid-column: 1;

    }

    .wrapper>*:nth-child(10) {
        -ms-grid-row: 4;
        -ms-grid-column: 2;

    }

    .wrapper>*:nth-child(11) {
        -ms-grid-row: 4;
        -ms-grid-column: 2;

    }

    .wrapper>*:nth-child(12) {
        -ms-grid-row: 4;
        -ms-grid-column: 3;

    }

    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;

    }

    .print {
        -ms-grid-column: 1;
        grid-column-start: 1;
        -ms-grid-column-span: 1;
        grid-column-end: 2;
        -ms-grid-row: 1;
        grid-row-start: 1;
        -ms-grid-row-span: 1;
        grid-row-end: 2;
        background-color: white;

    }

    .ad {
        -ms-grid-column: 2;
        grid-column-start: 2;
        -ms-grid-column-span: 1;
        grid-column-end: 3;
        -ms-grid-row: 1;
        grid-row-start: 1;
        -ms-grid-row-span: 1;
        grid-row-end: 2;
        background-color: 234;
    }

    .blank1 {
        -ms-grid-column: 3;
        grid-column-start: 3;
        -ms-grid-column-span: 1;
        grid-column-end: 4;
        -ms-grid-row: 1;
        grid-row-start: 1;
        -ms-grid-row-span: 2;
        grid-row-end: 3;
        background-color: 678;
    }

    .search {
        -ms-grid-column: 1;
        grid-column-start: 1;
        -ms-grid-column-span: 1;
        grid-column-end: 2;
        -ms-grid-row: 2;
        grid-row-start: 2;
        -ms-grid-row-span: 1;
        grid-row-end: 3;
        background-color: white;
    }

    .logo {
        -ms-grid-column: 2;
        grid-column-start: 2;
        -ms-grid-column-span: 1;
        grid-column-end: 3;
        -ms-grid-row: 2;
        grid-row-start: 2;
        -ms-grid-row-span: 1;
        grid-row-end: 3;
        background-color: 678;
    }

    .menu {
        -ms-grid-column: 1;
        grid-column-start: 1;
        -ms-grid-column-span: 1;
        grid-column-end: 2;
        -ms-grid-row: 3;
        grid-row-start: 3;
        -ms-grid-row-span: 1;
        grid-row-end: 4;
        background-color: 789;
    }

    .content {
        -ms-grid-column: 2;
        grid-column-start: 2;
        -ms-grid-column-span: 1;
        grid-column-end: 3;
        -ms-grid-row: 3;
        grid-row-start: 3;
        -ms-grid-row-span: 1;
        grid-row-end: 4;
        background-color: 567;

    }

    .rightside {
        -ms-grid-column: 3;
        grid-column-start: 3;
        -ms-grid-column-span: 1;
        grid-column-end: 4;
        -ms-grid-row: 3;
        grid-row-start: 3;
        -ms-grid-row-span: 2;
        grid-row-end: 5;
        background-color: orange;
    }

    .blank2 {
        -ms-grid-column: 1;
        grid-column-start: 1;
        -ms-grid-column-span: 1;
        grid-column-end: 2;
        -ms-grid-row: 4;
        grid-row-start: 4;
        -ms-grid-row-span: 1;
        grid-row-end: 5;
        background-color: red;

    }

    .footer {
        -ms-grid-column: 2;
        grid-column-start: 2;
        -ms-grid-column-span: 1;
        grid-column-end: 3;
        -ms-grid-row: 4;
        grid-row-start: 4;
        -ms-grid-row-span: 1;
        grid-row-end: 5;
        background-color: 289;

    }

did not work. Everything is jumbled at the top left corner of the page. — Mike Guerin, Apr 22 '19 at 18:28
Sorry to hear that. Just to make sure, did you only replace the nth-child section in your CSS code? — Csaba Farkas, Apr 22 '19 at 18:30
Yes I copied and pasted the code you provided. Thanks. It appears that when I did that every element was stacked on top of each other as if every grid box was the very first one. — Mike Guerin, Apr 22 '19 at 19:06

Why is grid row span not being accepted for "blank1" in IE 11

2 Answers2