Why is grid span not being excepted for "blank1" in IE 11 : css grid issue:  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 in in firefox and it will show what it is suppose to look like.  IE 11 need fixing.

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





          .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;
            
        }
    
    </style>

