How to make my CSS grid work on both Firefox and IE 11?

With the below code the css-grid displays without any problems on Firefox, Opera, and Chromium Browser

body {
  background-color: #ebf5d7;
  grid-gap: 5px;
  grid-template-columns: 10% 72% 17%;
  grid-template-areas:

  "header   header   header"
  "nav      nav      nav" 
  "linkBox  linkBox  linkBox"
  "main     main     main"
  "infoBox  infoBox  infoBox"
  "footer   footer   footer" ;
}

body > header {
    grid-area: header;
    background-image: url("/Bilder/f409784856.png");
    padding: 60px;
}

body > nav {
  grid-area: nav;
  background-color: #d2f5c4;
}
body > #externalLinks {
  grid-area: linkBox;
  background-color:  #d2f3c6;
}
body > main {
  grid-area: main;
  background-color: #eaf6e5;
}
body > #furtherInformation {
  grid-area: infoBox;
  background-color: #d2f3c6;
}

body > footer {
  grid-area: footer;
  background-color: #99ee7a;
}

Screenshot of how Firefox looks:

Now, running the below code on IE it looks like this:

body {
    display: grid;
    display: -ms-grid;
    width: 100%;
    height: 250px;
    -ms-grid-columns: 9% 73% 17%;
    -ms-grid-rows:  120px 80px 103px 200px 110px 70px;
    background-color: #ebf5d7;
    margin: 5px;
}
body > header {
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  background-image: url("/Bilder/f409784856.png");
  background-repeat: no-repeat;
  padding: 60px;
}
body > nav {
  -ms-grid-column: 1/3;
  -ms-grid-column-span: 3;
  -ms-grid-row: 2;
  background-color: #d2f5c4;
  margin: 5px;
}
body > #externalLinks {
  -ms-grid-column: 1;
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
   margin: 5px;
   background-color:  #d2f3c6;

}
body > main {

 display: block; 
 -ms-grid-column: 2; 
 -ms-grid-row: 3;
 -ms-grid-row-span: 3;
 margin: 5px;

 background-color: #eaf6e5;
}

body > #furtherInformation {

  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
   margin: 5px;
   background-color: #d2f3c6;

}
body > footer {

    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 6;
    -ms-grid-row-span: 6;
    margin: 5px;
    background-color: #99ee7a;
}

How yours to see, both Codes (IE 11 and Firefox) working

what follows the two code snippets above (IE and Firefox) here.

I want to use both variations on a single file, but my grid doesn't work properly on Firefox.

How do I make use of a single file and still support both Firefox and IE?

Solution

I found the solution of my Problem !

Thank this website i found the solution of my problem.. , with Flexbox Fallbacks... the solution is build a new container with Flexbox for IE 11.. .

Now have both Codes on one File , how to show it..

body {

  display: grid;    
  background-color: #ebf5d7;
  grid-gap: 5px;
  grid-template-columns: 10% 72% 17%;
  grid-template-areas:

   "header   header    header"
   "nav      nav          nav"
   "linkBox  main     infoBox"
   "footer   footer   footer";
}


body > header {
grid-area: header;
background-image: url("/Bilder/f409784856.png");
    padding: 60px;

}

body > nav {
 grid-area: nav;
 background-color: #d2f5c4;

}

body > #externalLinks {
 grid-area: linkBox;
 background-color:  #d2f3c6;

}
body > main {
  grid-area: main;
  background-color: #eaf6e5;
}

body > #furtherInformation {
  grid-area: infoBox;
  background-color: #d2f3c6;
}

body > footer {
 grid-area: footer;
 background-color: #99ee7a;

}

          /* IE 11 */

body {

   display: flex;
   flex-wrap: wrap;
   autoprefixer({ grid: true })
   width: 100%;
   background-color: #ebf5d7;



} 
body > header {
   flex-basis:100%;
   margin: 5px;
   background-image: url("/Bilder/f409784856.png");

}

body > nav {
    flex-basis:100%;
    margin: 5px;
    background-color: #d2f5c4; 
    -ms-grid-column: 1;
    -ms-grid-column-span: 2; 
    -ms-grid-row: 2;
} 

body > #externalLinks {

   flex-basis:8%;
   margin: 5px;
   background-color:  #d2f3c6;
   -ms-grid-column: 1;
   -ms-grid-row: 3;
}
body > main {
  flex-basis:68%;
  margin: 5px;
  -ms-grid-column: 2;
  -ms-grid-row: 3;
  -ms-grid-row-span: 4;
  background-color: #eaf6e5;
}

body > #furtherInformation {
  flex-basis: 20.4%;
  margin: 5px;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
  background-color: #d2f3c6;
}

body > footer {
    flex-basis:100%;
    margin: 5px;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 6;
    -ms-grid-row-span: 6;
    background-color: #99ee7a;
}

How to see now my IE 11

and my Firefox...