CSS grid layout: support grid-area for IE11

Question

Сan someone tell me how to make this example work in ie11? I checked the documentation and -ms- prefix did not help

#page {
  display: -ms-grid;
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head" "nav  main" "nav  foot";
  -ms-grid-rows: 50px 1fr 30px;
      grid-template-rows: 50px 1fr 30px;
  -ms-grid-columns: 150px 1fr;
      grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

Example: https://jsfiddle.net/9bp1ffs1/

Answer 1

There are 2 specific problems here. Firstly, IE10 and 11 and all versions of Edge up to v15 do not support Grid Areas. Any code for those browsers must use Grid Lines instead (which is a pity, as Grid Areas are more intuitive to most). And secondly, IE11 does not fully support the main HTML tag. In this case, IE11 will not properly place or style a main tag in a grid layout.

Working fork of your example here, using Grid Lines for both IE/Edge and W3C Models: https://jsfiddle.net/FilmFiddler/q074gpx8/4/

#page {
  display: -ms-grid;
  display: grid;
  width: 100%;
  height: 250px;
  -ms-grid-rows: 50px 1fr 30px;
  grid-template-rows: 50px 1fr 30px;
  -ms-grid-columns: 150px 1fr;
  grid-template-columns: 150px 1fr;
}
#page > header {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  -ms-grid-row: 1;
  grid-column: 1/3;
  grid-row: 1;
  background-color: #8ca0ff;
}
#page > nav {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-column: 1;
  grid-row: 2/4;
  background-color: #ffa08c;
}
#page #main {
  -ms-grid-column: 2;
  -ms-grid-row: 2;
  grid-column: 2;
  grid-row: 2;
  background-color: #ffff64;
}
#page > footer {
  -ms-grid-column: 2;
  -ms-grid-row: 3;
  grid-column: 2;
  grid-row: 3;
  background-color: #8cffa0;
}

HTML, with main tag replaced by a div:

<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <div id="main">Main area</div>
  <footer>Footer</footer>
</section>

Generally, the older CSS Grid Model used by IE and Edge is quite different to the current W3C implementation. Apart from the need for the -ms-prefix, there are considerable differences in the property namings, and as well as not supporting Grid Areas, or Grid Gaps. Also there is no support for the functions like fit_content() and repeat(), although the latter does have a Microsoft-specific implementation.

There is a reference in the MSDN Pages of using Grid Lines in the older Grid Model used by IE/Edge: https://msdn.microsoft.com/en-us/library/hh673533(v=vs.85).aspx

There is a discussion of the differences between the IE/Edge and the W3C Models, including the differences in properties, here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement