liebewinter: CSS-Grid: wie mache ein datei mit Firefox Code and IE 11 Code

Beitrag lesen

Ähnlische wie der vorletzte Code , aber ohne "Müll"...

body {
 
    display: grid;    
    background-color: #ebf5d7;
    
    margin: 5px;
    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;
  width: 100%;
  background-color: #ebf5d7;
  @supports (display: grid) {
    display: grid;
    
  }
} 


body > header {
   flex-basis:100%;
   @supports (display: grid) {
     background-image: url("/Bilder/f409784856.png");
    
   }
}

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

body > #externalLinks {
      
      flex-basis:8%;
      margin: 5px;
      @supports (display: grid) {
         background-color:  #d2f3c6;
         -ms-grid-column: 1;
         -ms-grid-row: 3;
        
       }
}

body > main {
    flex-basis:70%;
    margin: 5px;
    @supports (display: grid) {
      -ms-grid-column: 2;
      -ms-grid-column-span: 3;
      -ms-grid-row: 3;
      -ms-grid-row-span: 4;
      background-color: #eaf6e5;
      }
}

body > #furtherInformation {
    flex-basis: 18.3%;
    margin: 5px;
    @supports (display: grid) {
       -ms-grid-column: 3;
       -ms-grid-row: 3;
       -ms-grid-row-span: 3;
       background-color: #d2f3c6;
    } 
}

body > footer {
	flex-basis:100%;
        @supports (display: grid) {
           -ms-grid-column: 1;
	   -ms-grid-column-span: 3;
           -ms-grid-row: 6;
           -ms-grid-row-span: 6;
           background-color: #99ee7a;
           
        }
}