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

[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 🖖