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

[liebewinter]

Hallo , ich versuche seit einege Tage ein Datei mit den Code von Firefox und IE 11 zu bauen , aber ohne erfolgt…

Beiden Code Funzioniert wenn getrent sind , aber wenn beiden Code zusammen in einem Datei legen , der Firefox Browser verendert alles von der Website...

Der Grid Code für Firefox, Opera, and Chromium;

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  linkBox  linkBox"
"main     main     main"
"infoBox  infoBox  infoBox"
"footer   footer   footer" ;
}

<?php 


include 'CSS/tablet.css';

?>


body > header {
	grid-area: header;
	background-image: url("/Bilder/view.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;

}

Der Code für IE 11;

body {
 
  margin: 5px;
  display: -ms-grid;
  display: grid;
  width: 100%;
  
  grid-gap: 5px;
  -ms-grid-columns: 9% 73% 17%;
      grid-columns: 9% 73% 17%;
  -ms-grid-rows:  120px 80px 103px 200px 110px 70px;
      grid-rows:  120px 80px 103px 200px 110px 70px;
  background-color: #ebf5d7;
  
}






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 {
    
    margin: 5px;
    grid-rows: 80px;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;
    
    background-color: #d2f5c4;

}

body > #externalLinks {
     margin: 5px;
    grid-rows: 103px;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    
    
   
    background-color:  #d2f3c6;
	
}
body > main {
   
    margin: 5px;
    display: block; 
    -ms-grid-column: 2; 
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
  
    
    background-color: #eaf6e5;
}

body > #furtherInformation {
    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 {
	margin: 5px;
        -ms-grid-column: 1;
	-ms-grid-column-span: 3;
        -ms-grid-row: 6;
        -ms-grid-row-span: 6;
     
    background-color: #99ee7a;

}

Kann Bitte jemand mir hilfe , danke!

[MrMurphy1]

Hallo

Mit den Quellcodeschnipseln kann niemand etwas anfangen, wie können die Seite so ja nicht nachbauen.

Mir fällt auf die schnelle nur auf, dass du für das CSS-grid vom IE11 hauptsächlich Präfixe verwendest. Der IE11 benötigt aber ein ganz anderes CSS. Ob sich die beiden CSS-Grid-Versionen einfach so mischen lassen wage ich deshalb zu bezweifeln.

Siehe zum Beispiel:

https://maurice-web.de/css-grids-raster-im-ie10-und-in-neuer-syntax-definieren/

Nachprüfen kann ich deine Angaben nicht, da du uns entscheidenden Quelltext vorenthälst.

Ich persönlich verwende für ein CSS-Grid-Layout als Fallback Flexbox. Dann gibt es einerseits keine CSS-Überschneidungsprobleme der unterschiedlichen grid-Versionen. Gleichzeitig werden so noch viele andere Browser unterstützt, die zwar überhaupt kein CSS-Grid kennen, aber mit Flexbox umgehen können.

Flexbox war ja Jahre eher in der Praxis einsetzbar als CSS-Grid.

Dabei kann und wird es wahrscheinlich zu unterschiedlichen Darstellungen kommen, das ist aber gängig und normal. Wer für alle Endgeräte die gleiche Ansicht erzeugen will hat sowieso die Entwicklung von HTML und CSS der letzten 10 Jahre verpasst. Das geht schlicht nicht.

Gruss

MrMurphy

[liebewinter]

Erste vielen danks für deine Antwortet ! ,kannst du Bitte einiger Schritten sagen um das zu machen ?

Nachprüfen kann ich deine Angaben nicht, da du uns entscheidenden Quelltext vorenthälst.

body {
 
  display: grid;
  
  
  width: 100%;
  height: 250px;
  grid-gap: 5px;
  grid-template-rows:  120px 80px 103px 200px 110px 70px;
  grid-template-columns: 100px 400px 200px;
  grid-template-areas:"header   header   header"
                      "nav      nav      nav"
                      "linkBox  linkBox  linkBox"
                      "main     main     main"
                      "infoBox  infoBox  infoBox"
                      "footer   footer   footer" ;
   
  display: -ms-grid;
   -ms-grid-columns: 9% 73% 17%;
  
   -ms-grid-rows:  120px 80px 103px 200px 110px 70px;
  
     
   background-color: #ebf5d7;
   margin: 5px;
}






body > header {
   
    grid-template-columns: 1/3;
    grid-template-rows: 1/3;
    -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 {
    
   
    grid-columns: 1/3;
    grid-rows: 1/3;
    -ms-grid-column: 1/3;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;
    
    background-color: #d2f5c4;
    margin: 5px;
}

body > #externalLinks {
    
    grid-columns: 1; 
    grid-rows: 103px;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    margin: 5px;
    
   
    background-color:  #d2f3c6;
	
}
body > main {
    
    grid-columns: 2; 
    grid-rows: 200px;
   
    display: block; 
    -ms-grid-column: 2; 
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    margin: 5px;
    
    background-color: #eaf6e5;
}

body > #furtherInformation {
    
    grid-columns: 3; 
    grid-rows: 110px;
    
    -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 {
	
        grid-columns: 1/3; 
        grid-rows: 70px;
        
        -ms-grid-column: 1;
	-ms-grid-column-span: 3;
        -ms-grid-row: 6;
        -ms-grid-row-span: 6;
        margin: 5px;
        background-color: #99ee7a;

}

[liebewinter]

jetzt habe versuche ohne grid-template-areas die ich Fehler gemacht habe , weil grid-template-areas ist für IE , und an IE schon mit -ms-grid-column: gegeben habe ...

body {
 
  display: -ms-grid;
  display: grid;
  grid-areas:         "header   header   header"
                      "nav      nav      nav"
                      "linkBox  linkBox  linkBox"
                      "main     main     main"
                      "infoBox  infoBox  infoBox"
                      "footer   footer   footer" ;
  
  width: 100%;
  height: 250px;
  grid-gap: 5px;
  -ms-grid-rows:  120px 80px 103px 200px 110px 70px;
  grid-rows:  120px 80px 103px 200px 110px 70px;
  -ms-grid-columns: 9% 73% 17%;
  grid-columns: 100px 400px 200px;


  
  
   
  
     
   background-color: #ebf5d7;
   margin: 5px;
}






body > header {
   
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-columns: 1/3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-rows: 1/3;
    
    
    
    
    background-image: url("/Bilder/f409784856.png");
    
    background-repeat: no-repeat;
    padding: 60px;
       
    
}

body > nav {
    
    -ms-grid-column: 1/3;
    -ms-grid-column-span: 3;
    grid-columns: 1/3;
    -ms-grid-row: 2;
    grid-rows: 1/3;
   
   
    
    background-color: #d2f5c4;
    margin: 5px;
}

body > #externalLinks {
    -ms-grid-column: 1;
    grid-columns: 1; 
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    margin: 5px;
    grid-rows: 103px;
    
   
    
   
    background-color:  #d2f3c6;
	
}
body > main {
    -ms-grid-column: 2;
    grid-columns: 2; 
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    display: block; 
    margin: 5px;
    grid-rows: 200px;
   
    background-color: #eaf6e5;
}

body > #furtherInformation {
    
    -ms-grid-column: 3;
    -ms-grid-column-span: 3;
    grid-columns: 3; 
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    margin: 5px;
    grid-rows: 110px;
    
    
    background-color: #d2f3c6;
    
}

body > footer {
	-ms-grid-column: 1;
	-ms-grid-column-span: 3;
        grid-columns: 1/3; 
        -ms-grid-row: 6;
        -ms-grid-row-span: 6;
        margin: 5px;
        grid-rows: 70px;
        
        background-color: #99ee7a;

}

wie der screenshot zeigt , ist besser geworden , aber nicht 100% ...

[liebewinter]

ich habe dieser Artikel gefunde der sprecht , was du sagst…

CSS Grid Layout with Flexbox Fallback

ich möchte ihn lesen...

[Gunnar Bittersmann]

@@ liebewinter

dieser Artikel […] ich möchte ihn lesen...

Ich nicht. Da steht ziemlich viel Unsinn drin.

.grid-container {
  @supports (display: grid) {
    display: grid;  
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  }
}

Das ist kein gültiges CSS.

In Sass wäre die Verschachtelung so möglich. Davon steht aber nichts da. Außerdem sollte solch ein Artikel keinen Präprozessor verwenden.

Andersrum wäre es gültiges CSS:

@supports (display: grid) {
  .grid-container {
    display: grid;  
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  }
}

Das ist aber immer noch unsinnig, denn das tut exakt dasselbe wie

  .grid-container {
    display: grid;  
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  }

Wozu also das @supports()?

function detectIE() {
  if(navigator.userAgent.match(/Trident.*rv:11\./)) {
    $('body').addClass('ie11');
  }
}

User fucking agent sniffing?? Was für ein Blödsinn!

IE versteht kein @supports(), das stimmt. Das ist aber kein Grund für solchen Quatsch.

Man schreibt die Regeln für den Fallback ohne .ie11 auf und überschreibt sie (falls überhaupt nötig) für moderne Browser wieder in einem @supports()-Block – dafür macht ein solcher Sinn.

Also nicht

.ie11 {
  li {
    min-width: 290px;
    width: calc((100% / 5) - 30px);
  }
}

(mal abgesehen davon, dass das schon wieder kein CSS ist), sondern

  li {
    min-width: 290px;
    width: calc(100% / 5 - 30px);
  }

@supports (display: grid) {
  li {
    min-width: auto;
    width: auto;
  }
}

Die nicht notwendige Klammer hab ich auch gleich entsorgt.

Es sollten sich gute Artikel zu CSS Grid finden lassen. Dieser gehört nicht dazu.

Oder gute Video-Tutorials: in Jen Simmons’ YouTube-Kanal Layout Land.

LLAP 🖖

[Gunnar Bittersmann]

@@ liebewinter

Der Grid Code für Firefox, Opera, and Chromium;

Opera ist seit Version 15 (2013) auch ein Chromium. MS Edge hingegen ist (noch) kein Chromium, kann aber auch CSS Grid – und zwar besser als jeder andere Browser.

(Bleibt zu hoffen, dass Edge bei der Umstellung auf Chromium nicht einfach dessen Bugs übernimmt, sondern dass die Bugs in Chromium endlich mal gefixt werden.)

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  linkBox  linkBox"
"main     main     main"
"infoBox  infoBox  infoBox"
"footer   footer   footer" ;
}

Das sind einfach alle Boxen untereinander – dafür bräuchtest du kein Grid.

Die Anordnung der Boxen im Grid passiert wohl per media query in dem Teil, der mit

<?php 


include 'CSS/tablet.css';

?>

eingebunden wird?

Der Code für IE 11;

body {
 
  margin: 5px;
  display: -ms-grid;
  display: grid;
  width: 100%;
  
  grid-gap: 5px;
  -ms-grid-columns: 9% 73% 17%;
      grid-columns: 9% 73% 17%;
  -ms-grid-rows:  120px 80px 103px 200px 110px 70px;
      grid-rows:  120px 80px 103px 200px 110px 70px;
  background-color: #ebf5d7;
  
}

Nein. IE 10 und 11 verstehen Grid nur mit Präfix – und das nur teilweise.

Mit den Eigenschaften ohne Präfix überschreibst du die Angaben für andere Browser – genau das, was du nicht willst. Die müssen in dem Teil für IE also weg.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

kann man das nicht lösen, indem man die modernen Grid-Regeln in eine @suppports (grid-template-areas: "a") Klammer legt und damit Regeln für den Internet Explorer überschreibt?

Rolf

[liebewinter]

Erste vielen danks für deinen empfiehlt !

Die Anordnung der Boxen im Grid passiert wohl per media query in dem Teil, der mit

<?php 


include 'CSS/tablet.css';

?>

eingebunden wird?

Nein , auch ohne ihn bekomme auf Firefox Browser keine gute aussiehst...

Die müssen in dem Teil für IE also weg.

was würdest du mir empfiehlt zu machen wenn auch meine Grid Layout für IE erreicherbat machen möchte....

[Gunnar Bittersmann]

@@ liebewinter

was würdest du mir empfiehlt zu machen wenn auch meine Grid Layout für IE erreicherbat machen möchte....

Als erstes: beschreiben oder aufmalen, wie es denn aussehen soll.

LLAP 🖖

[liebewinter]

ich möchte das sie siesht wie meine firefox aus...

[liebewinter]

Geschafft !

Danke dieser Websiteich habe die lösung gefunde .

Wie habe jetzt der Code für Firefox und IE 11 .

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;
 
  
  background-color: #ebf5d7;
  @supports (display: grid) {
    display: grid;
     grid-template-columns: repeat(4, 1fr);
  }
} 


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

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;
         margin: 5px;
       }
}

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

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

body > footer {
	flex-basis:100%;
        margin: 5px;
        @supports (display: grid) {
           -ms-grid-column: 1;
	   -ms-grid-column-span: 3;
           grid-columns: 1/3; 
           -ms-grid-row: 6;
           -ms-grid-row-span: 6;
           
           grid-rows: 70px;
           background-color: #99ee7a;
           grid-gap: 5px;
          }
}

und mit dieser Code firefox aussiehst

und IE 11…

ich wünsche alle euch eine Schöne Wochenende !

[Matthias Apsel]

Hallo liebewinter,

Dein CSS ist zu großen Teilen ungültig.

body {
/* */
  @supports (display: grid) {
    /* */
  }
} 

@supports darf nicht innerhalb eines Regelsatzes notiert werden.

Bis demnächst
Matthias

[liebewinter]

und was kann machen um andere zu machen ?

[Gunnar Bittersmann]

@@ liebewinter

und was kann machen um andere zu machen ?

Lesen.

LLAP 🖖

PS: Ich rate jetzt mal: deine Muttersprache ist Französisch?

[liebewinter]

nicht spanisch , aber ich dir verstehe gut...

[liebewinter]

ich habe Ein Bissen der Codet korregiert und ist so geblieben..

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;
  autoprefixer({ grid: true })
  width: 100%;
  background-color: #ebf5d7;
  
} 


body > header {
   flex-basis:100%;
   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:70%;
    margin: 5px;
    -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;
    -ms-grid-column: 3;
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    background-color: #d2f3c6;
     
}

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

Bei @supports (display: grid) haben euch rechts .., ich habe ihn gelöscht... , der rest bleibt alles...ich bekomme gleiche Bild wie der screenshot von hier ...

[liebewinter]

Ä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;
           
        }
}

[Gunnar Bittersmann]

@@ liebewinter

body {
   
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background-color: #ebf5d7;
  @supports (display: grid) {
    display: grid;
    
  }
} 

Welche Sprache soll das sein? CSS ist es nicht – wie ich schon sagte.

Der @supports-Block ist hier auch völlig überflüssig. Du kannst genauso gut

body
{
	display: flex;
	display: grid;
}

schreiben. In Browsern, die Grid können, überschreibt die zweite Deklaration die erste. Browser, die kein Grid können, ignorieren die zweite Deklaration.

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;
           
         }
} 

Angenommen, das soll SCSS-Code sein. Dann macht das immer noch überhaupt keinen Sinn. IE versteht kein @supports; ignoriert also den ganzen Block und bekommt die für ihn gedacheten -ms--Eigenschaften überhaupt nicht zu sehen.

LLAP 🖖

[liebewinter]

ich habe gemacht wie du sagst , und bekomme dieser screenshot auf meine IE 11 ...

auf meine Firefox Browser sehe alles gut...

[Gunnar Bittersmann]

@@ liebewinter

CSS Tricks hat eine Serie von Artikeln von Daniel Tonon, beginnend mit CSS Grid in IE: Debunking Common IE Grid Misconceptions

LLAP 🖖

[liebewinter]

Viele danks für deine Link ! , auch wenn meine Probleme gelöscht habe , möchte ihn lese...

[Matthias Apsel]

Hallo liebewinter,

auch wenn meine Probleme gelöscht habe

😂 Netter Vertipper.

lösen (resoldre) — löschen (esborrar).

Bis demnächst
Matthias

[liebewinter]

ich möchte sage, lösen.. ☺️