How can I get display:grid (or ms-grid) to work in Internet Explorer 11?

Question

@media (min-width: 100px) {
    .my-header {
        .header-info-nav {
            top: -38px;
            float: right;
            .username,
            .change-profile, 
            .ttm-link {
                float: right;
                font-size: 12px;
                .header-username,
                a {
                    float: right;
                }
            }
        }
    }
}
@media (min-width: 768px) {
    .my-header {    
        .my-logo1 {
            display: none;
        }
        .my-logo2 {
            position: absolute;
            top: 16px;
            img {
                width: 196px;
            }
        }
        .header-info-nav {
            position: relative;
            top: -5px;
            display: grid;
            display: -ms-grid;
            float: right;
            .username,
            .change-profile, 
            .ttm-link {
                font-size: 14px;
            }
        }
    }
}

<div class="container my-header">
    <div class="my-logo1">
        <img src="/images/my-Business-Logo-small.gif">
    </div>
    <div class="my-logo2">
        <img src="/images/my-Business-Logo.gif">
    </div>
    <div class="header-info-nav">
        <div class="username">
            <%= GetUsername() %>
        </div>
        <div class="change-profile">
            <a href="#">Change Profile</a>
        </div>
        <div class="ttm-link">
            <a href="#">Back to TTM</a>
        </div>
    </div>
</div>

I have display set to grid because for some reason my header-info-nav divs because they are not stacking how I would expect them to. All the info I can find out there regarding div problems is where people are trying to get them to be side-by-side, but my problem is the opposite.

This is a header file, it should display 1 logo on the left and 3 stacked divs on the right. However in Internet Explorer 11 all divs are on top of each other (overlapped) as if they are in the same position. Any help would be appreciated.

Answer 1

You said, "it should display 1 logo on the left and 3 stacked divs on the right. However, in Internet Explorer 11 all divs are on top of each other (overlapped) as if they are in the same position."

I suggest trying to add ms-grid-column and -ms-grid-row in relevant classes that may help to fix the issue for the IE 11 browser.

Modified CSS code:

@media screen and (min-width: 100px) {
    .my-header .header-info-nav {
        top: -38px;
        float: right;
    }
    .username,
    .change-profile,
    .ttm-link {
        float: right;
        font-size: 12px;
        .header-username,
        a {
            float: right;
        }
    }
}

@media screen and (min-width: 768px) {
    .my-header .my-logo1 {
        display: none;
    }
    .my-header .my-logo2 {
        position: absolute;
        top: 16px;
        img {
            width: 196px;
        }
    }
    .my-header .header-info-nav {
        position: relative;
        top: -5px;
        display: grid;
        display: -ms-grid;
        float: right;
    }
    .username {
        ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 1;
    }
    .change-profile {
        ms-grid-column: ;
        grid-column: 1;
        -ms-grid-row: 2;
    }
    .ttm-link {
        ms-grid-column: 1;
        grid-column: 1;
        font-size: 14px;
        -ms-grid-row: 3;
    }
}

Output in the IE 11 browser:

Answer 2

Since you're using the relavent prefix for IE, I don't see any other issues in your css. But only thing that I can think of is when considering grid in IE you'll have to be aware that sometimes using it in a <main> tag has issues. If that's the case try replaceing it with something like <section role="main">.