Unexplained grid row height in IE and Edge

Question

I've edited the CodePen example to add some content to the center div with height on all container div and it is clearly not working please see here:

https://codepen.io/anon/pen/OEBxNr

These lines seem to cause said gap below:

.container {
   ... 
   -ms-grid-rows: 1fr 1fr 1fr;
}

.top {
   ...
   height 8.4rem;
}

But I'm still left with the second below problem which can be seen in the CodePen above.

I have an app container and in it a nav at the top, page in the middle, and footer at the bottom. My layout is working fine in all browsers except IE and Edge.

The below code creates a gap between the second and first rows. The second problem is that the size of the page is stretched far beyond any content.

body, html {
  height: 100%;
}

.container {
    background:cyan;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(auto, auto);
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr;
    height: 100%;
}

.top {
  background: yellow;  
  height: 8.4rem;
  position: relative;
  z-index: 99;
  grid-column: 1 / span 12;
  grid-row: 1;
  background: pink;
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 1;
}

.mid {
  grid-column: 1 / span 12;
  grid-row: 2;
  min-width: 0;
  background: yellow;
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 2;
  height: 100%;
}

.bottom {
    background: purple;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-column-span: 12;
}

<body>
    <div class='container'>
        <div class='top'>TOP</div>
        <div class='mid'>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
        </div>
        <div class='bottom'>
            <p>some short text</p>
        </div>
    </div>
</body>

Can't reproduce the problem. I don't see any gaps between rows on Edge. https://jsfiddle.net/x2mva6hp/2/ — Michael Benjamin, Jun 22 '18 at 21:14
The first issue you should focus on is your use of `height: 100%` on the container. That may be the cause of the problem. Some browsers still require a defined height on the parent in order for a percentage height to work on the child. Either add `height: 100%` to the `html` and `body` elements, or switch to `height: 100vh` on the container. Details [**here**](https://stackoverflow.com/a/31728799/3597276) and [**here**](https://stackoverflow.com/q/33636796/3597276). — Michael Benjamin, Jun 27 '18 at 11:21
Is this what you want in IE11: https://codepen.io/anon/pen/rKqYJr — Michael Benjamin, Jun 27 '18 at 12:03
No there's a gap between the first and second rows showing the cyan background. The rows should stack without gaps. Filling what ever space needed to take the whole screen without the outer container ever showing.. — S. Schenk, Jun 27 '18 at 12:09
@Michael_B Stretch the code pen demo section to a larger screen you will see that the middle section is not aligned to the top. There's a gap between it and first row just like in the screen capture I've attached above. — S. Schenk, Jun 27 '18 at 12:21
You mentioned in your question that the layout works fine in all browsers except Edge or IE. So I adjusted the code for the layout in IE to emulate the appearance in Chrome and Firefox, which it does in my codepen. — Michael Benjamin, Jun 27 '18 at 12:26
Sorry my friend. I'm just getting to work now. Will have to come back later. — Michael Benjamin, Jun 27 '18 at 12:43

FilmFiddler · Accepted Answer · 2018-07-01T06:42:18.340

The way the code is currently arranged, all versions of Microsoft browsers which have any support of Grid (and that means legacy-grid IE10-11, legacy-grid Edge HTML12-15 and compliant-grid Edge HTML16 and 17) are receiving the following legacy row declaration:

-ms-grid-rows: 1fr 1fr 1fr;

Note that the recent compliant versions of Edge understand both the standard and the legacy -ms syntax, so it is important not to put that legacy syntax last. Legacy declarations must go before any standard syntax declarations.

Whereas compliant versions of Firefox, Chrome, etc are all receiving:

grid-template-rows: minmax(auto, auto);

The minmax() function will handle the unequal contents much better than having a series of 1fr row heights, which appear to be causing the stated problem, so it is a matter of providing minmax() to all browsers for the row declaration. Note that minmax() is basically supported by all those MS legacy browsers, provided it is -ms- prefixed.

Edit: As suggested by Michael_B, it is simpler to just use grid-template-rows: auto, instead of adding minmax(auto, auto).

.container {
  background: cyan;
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  /* legacy minmax() support */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
}

.top {
  background: pink;
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 1;
  grid-column: 1 / span 12;
  grid-row: 1;
  height: 8.4rem;
}

.mid {
  background: yellow;
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 2;
  grid-column: 1 / span 12;
  grid-row: 2;
}

.bottom {
  background: purple;
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 3;
  grid-column: 1 / span 12;
  grid-row: 3;
}

<div class='container'>
  <div class='top'>TOP</div>
  <div class='mid'>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
  </div>
  <div class='bottom'>
    <p>some short text</p>
  </div>
</div>

The height 100% declaration on the .container has been omitted, as that does appear to force a small horizontal strip of background cyan to appear under the .top in Edge 17 in large screens (but not in most other browsers, including IE).

One other thing to note, just for convenience, is that the action of the repeat() function is supported under a different -ms- legacy syntax. So you could also replace the following:

-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

with

-ms-grid-columns: (1fr)[12];

See here for the legacy -ms variations on the Grid syntax: https://msdn.microsoft.com/en-us/library/hh673533(v=vs.85).aspx

Yeah I've figured it out already but there was no point answering my own question. Thanks though. — S. Schenk, Jun 30 '18 at 11:24
`minmax(auto, auto, auto)` is invalid. [The function takes only two arguments](https://www.w3.org/TR/css3-grid-layout/#valdef-grid-template-columns-minmax): `minmax(min, max)`. — Michael Benjamin, Jun 30 '18 at 11:57
In fact, I think `grid-template-rows: minmax(auto, auto)` (as in the question) is no different than just `grid-template-rows: auto`. Both create just one row and the content sets its height. Test it out. I don't think there's any difference. — Michael Benjamin, Jun 30 '18 at 12:01
@Michael_B - Thanks for pointing out the minmax error - fixed now. Also, you're right about the two auto ways - no difference between them, so probably simpler to just use auto on the grid-template-rows. — FilmFiddler, Jul 01 '18 at 06:21

Dustin Halstead · Answer 2 · 2018-06-27T17:43:43.150

The MID section is aligned at the top in Internet Explorer 11 on my machine -- using both your current CSS or what was originally posted.

However, there is a large amount of padding around the container -- which is a byproduct of browser rendering.

Since every browser and device can potentially apply tiny variances to how things are displayed, it can be extremely helpful, and less frustrating, to normalize the layout before applying any of your own styling.

For the most part, Normalizing is essentially the practice of removing browser presets and defining starting values in order to help standardize how everything is interpreted afterwards.

Here's my personal, normalize.css ...

/* ┌─────────────────────────────────────────────────────────────────┐
/* │   Normalize v1.1                                                │
/* │   Created by Dustin Halstead                                    │
/* └─────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Universal Adjustments                                        │ 

    /* 1. Correct line height in all browsers. */
    /* 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
        * {
            padding: 0;
            margin: 0;
            border: 0;
            border-collapse: collapse;
            vertical-align: baseline;
            border-spacing: 0;
            text-decoration: none;
            line-height: 1.15; /* 1 */
            -ms-text-size-adjust: 100%; /* 2 */
            -webkit-text-size-adjust: 100%; /* 2 */
        }

/* └────────────────────────────────────────────────────────────────┘ 


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Sections                                                     │ 

    /* Correct display in IE 9-. */
        article, aside, footer, header, nav, section, figcaption, figure, main { display: block; }

    /* Correct `h1` font size and margin within `section` and `article` areas in Chrome, Firefox, and Safari. */
        h1 { font-size: 2em; margin: 0.67em 0; }

/* └────────────────────────────────────────────────────────────────┘ 


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Grouping                                                     │ 

    /* 1. Correct box sizing in Firefox. */
    /* 2. Show overflow in Edge and IE. */
        hr {
            box-sizing: content-box; /* 1 */
            height: 0; /* 1 */
            overflow: visible; /* 2 */
        }

    /* 1. Correct inheritance and scaling of font size in all browsers. */
    /* 2. Correct odd `em` font sizing in all browsers. */
        pre {
            font-family: monospace, monospace; /* 1 */
            font-size: 1em; /* 2 */
        }

/* └────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Text                                                         │ 

    /* 1. Remove the gray background on active links in IE 10. */
    /* 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
        a {
            background-color: transparent; /* 1 */
            -webkit-text-decoration-skip: objects; /* 2 */
        }

    /* Correct font weight in Chrome, Edge, and Safari. */
        b, strong { font-weight: bolder; }

    /* Correct the scaling and odd `em` font sizing in all browsers. */
        code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }

    /* Correct font style in Android 4.3-. */
        dfn { font-style: italic; }

    /* Correct font size in all browsers. */
        small { font-size: 80%; }

    /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
        sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
        sub { bottom: -0.25em; }
        sup { top: -0.5em; }

/* └────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Embedded Content                                             │ 


    /* Add the correct display in iOS 4-7. */
        audio:not([controls]) { display: none; height: 0; }

    /* Hide overflow in IE. */
        svg:not(:root) { overflow: hidden; }

/* └────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Forms                                                        │

    /* Remove the margin in Firefox and Safari. */
        button, input, optgroup, select, textarea { margin: 0; }

    /* Remove the inheritance of text transform in Edge, Firefox, and IE. */
        button, select { text-transform: none; }

    /* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. */
    /* 2. Correct the inability to style clickable types in iOS and Safari. */
        button,
        html [type="button"], /* 1 */
        [type="reset"],
        [type="submit"] {
            -webkit-appearance: button; /* 2 */
        }

    /* Correct the text wrapping in Edge and IE. */
        legend { box-sizing: border-box; display: table; max-width: 100%; white-space: normal; }


    /* Remove the default vertical scrollbar in IE. */
        textarea { overflow: auto; }

    /* Correct the cursor style of increment and decrement buttons in Chrome. */
        [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

    /* Correct the odd appearance in Chrome and Safari. */
        [type="search"] { -webkit-appearance: textfield; }

    /* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */
        [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

    /* Correct the inability to style clickable types in iOS and Safari. */
        ::-webkit-file-upload-button { -webkit-appearance: button; }

/* └────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Interactive                                                  │

    /* Correct display in Edge, IE, and Firefox. */
        details, menu { display: block; }

    /* Correct display in all browsers. */
        summary { display: list-item; }

/* └────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Miscellaneous                                                │

    /* Correct display in IE 9-. */  
        canvas { display: inline-block; }

    /* Correct display in IE. */
        template { display: none; }

    /* Correct display in IE 10-. */
        [hidden] { display: none; }

/* └────────────────────────────────────────────────────────────────┘

Give it a shot and see if it helps improve what you're seeing.

Hopefully, it'll prove to be of some use.

Update:

Realized that the layout was breaking during browser resizing more than the initial rendering.

The problem seems to be a direct result of including: display:-ms-grid;
... as well as a few positioning errors.
In addition, display: flex; needs to be defined in order for the content to flow correctly in the specified div.

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 270px;
    background:cyan;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(auto, auto);
}

.top {
    min-height: 8em;
    background: pink;
    -ms-grid-column: 1;
    -ms-grid-column-span: 12;
    -ms-grid-row: 1;
    grid-column: 1 / span 12;
    grid-row: 1;
}

.mid {
    min-height: 10em;
    background: yellow;
    -ms-grid-column: 1;
    -ms-grid-column-span: 12;
    -ms-grid-row: 2;
    grid-column: 1 / span 12;
    grid-row: 2;
    display: flex;   
}

.bottom {
    min-height: 5em;
    background: purple;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-column-span: 12;
    grid-row: 3;
    grid-column: 1 / span 12;
}

Sadly it isn't. Setting 100% on the container in the real site leads to odd results, where the container only covers the viewport without scroll and the rest overflows. If I don't set the container to 100% it's height is extremely large for some reason and the line: `-ms-grid-rows: 1fr 1fr 1fr;` makes all the rows even, regardless to how much content each one actually holds. — S. Schenk, Jun 27 '18 at 16:43
Please see the new codepen showing it's not working as expected: https://codepen.io/anon/pen/OEBxNr — S. Schenk, Jun 27 '18 at 17:18
It's just good practice for full-page containers (since they don't need flexibility), but also because height: 100%; doesn't work -- therefore, using this positioning allows the container to take up the entire view. In addition, an element with this type of positioning is not affected by other elements, thereby making the container reliable. Notice how it completely ignores the extra padding that the layout previously had. Nevertheless, it's not absolutely necessary and is dependent on what your end goal is for the page layout. — Dustin Halstead, Jun 27 '18 at 18:13
Of course, you can also use viewpoint height instead of percentage ... height: 100vh; — Dustin Halstead, Jun 27 '18 at 18:23

Unexplained grid row height in IE and Edge

2 Answers2

Update: