Legie Legie - 1 year ago 203
CSS Question

CSS Grid Layout with full height on IE

I started using CSS Grid Layout by great Rachel Andrews and I cant figure out, how can I stretch wrapper. I am using her first example from book Get Ready for CSS Grid Layout with a little modification - full height.

It works perfect on Chrome, FF, Safari, Opera - but it doesn't fill full height on IE. I am using IE prefixes for grid system (

) and everything works but not full height.

.wrapper {
display: grid;
display: -ms-grid;
grid-template-columns: 12px calc(50vw - 18px) 12px calc(25vw - 18px) 12px calc(25vw - 12px) 12px;
-ms-grid-columns: 12px calc(50vw - 18px) 12px calc(25vw - 18px) 12px calc(25vw - 12px) 12px;
grid-template-rows: 12px auto 12px auto 12px;
-ms-grid-rows: 12px auto 12px auto 12px;
background-color: #fff;
color: #444;
height: 100vh;

.box {
background-color: rgb(120, 70, 123);
border: 5px solid rgb(88, 55, 112);
color: #fff;
border-radius: 5px;
padding: 20px;
font: 150%/1.3 Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;

.a {
grid-column: 2 / 3;
grid-row: 2 / 5;
-ms-grid-column: 2;
-ms-grid-column-span: 1;
-ms-grid-row: 2;
-ms-grid-row-span: 3;

.b {
grid-column: 4 / 7;
grid-row: 2 / 3;
-ms-grid-column: 4;
-ms-grid-column-span: 3;
-ms-grid-row: 2;
-ms-grid-row-span: 1;

.c {
grid-column: 4 / 5;
grid-row: 4 / 5;
-ms-grid-column: 4;
-ms-grid-column-span: 1;
-ms-grid-row: 4;
-ms-grid-row-span: 1;

.d {
grid-column: 6 / 7;
grid-row: 4 / 5;
-ms-grid-column: 6;
-ms-grid-column-span: 1;
-ms-grid-row: 4;
-ms-grid-row-span: 1;

<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>

Also there is working jsfiddle: https://jsfiddle.net/v7d641jb/

(if you want to check the whole example its here http://legie.kirril.com/www/grid/index.html)

Answer Source

Although the CSS Grid Spec (the older one which is supported by IE) does define an auto value for grid-rows, it obviously isn't working in IE.

The simple solution is to replace auto with 1fr.

Instead of this:

-ms-grid-rows: 12px auto 12px auto 12px;

Try this:

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

revised fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download