Menu
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>
505
Grid Auto Height This is useful if you have relatively few rows and don't want empty space between the last row and the bottom of the grid. To allow the grid to auto-size it's height to fit rows, set grid property domLayout='autoHeight' .
The supporting browsersOther than in Internet Explorer, CSS Grid Layout is unprefixed in Safari, Chrome, Opera, Firefox and Edge.
There was some discussion in the old spec about grid item auto placement, but the feature was never implemented in IE11. (Auto placement of grid items is now standard in current browsers). So unless you specifically define the placement of grid items, they will stack in cell 1,1.
The grid-row-gap property defines the size of the gap between the rows in a grid layout. Note: This property was renamed to row-gap in CSS3.
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
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
