Css-Grid: Flexbox overwriting Grid

HTML-CSS
#1

I have this Code for my Website, it is writing in Grid.

body {

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


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

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

and here how to show it on my Firefox Browser .

Because i will too my Website to show on IE 11, I have to write this Code on Flex for 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: 19.5%;
 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;
}

Now both Codes , Grid and Flex have on one File .How you to show my Firefox Browser to see a “little” difference…

firefox-flex_code
firefox-flex_code1279×627 221 KB

How to see my Flex overwrite Grid…

Here all Code , html/css .

My Question, what can I to do for preventing Flex overwrite Grid. , i will that Firefox Browser Display Grid Layout and IE 11 , Display Flex layout

Can anyone help me and this problem to solve? , very Thanks!

#2

IE11 supports grid and flex, so whichever one comes last in the place they are declared will be applied. -

display: flex;
display: grid; // this wins

display: grid;
display: flex: // this wins

Anyway. What is this? autoprefixer({ grid: true }).

#3

i don’t know , i have to copy on a exercise …:smiley:

i am since a Week that i to want this problem to solve , but every time i come this problem…:grimacing:
every time change my layout from Firefox (last image…)…

display: flex;
display: grid; // this wins
display: grid;
display: flex: // this wins

i have to try as you tell me and change nothing…

can you please tell me , how can to do without the layout from the Firefox to change… i will to show on Firefox identical as now to show on my Website…

#4

Firefox supports grid and flex
IE11 supports grid and flex

If you want IE11 to only use flex and Firefox to only use grid, you generally need to find out what browser someone is using and serve them a different stylesheet.

Autoprefixer is a tool that automatically adds browser prefixes. It is the correct tool for this job, as it will automatically generate correct grid prefixes for IE11 (note, I need to emphasise that grid works in IE10 and 11, with only slight caveats, and I don’t understand why you’re trying to use flex instead).

But that line of code isn’t CSS. I assume it is a command to a specific program to use Autoprefixer process the CSS a specific way. If you have no idea what it is or what it does, there’s a big issue there

#5

If you want IE11 to only use flex and Firefox to only use grid, you generally need to find out what browser someone is using and serve them a different stylesheet.

Can you please give a example how to does it ?

Autoprefixer is a tool that automatically adds browser prefixes. It is the correct tool for this job, as it will automatically generate correct grid prefixes for IE11 (note, I need to emphasise that grid works in IE10 and 11, with only slight caveats, and I don’t understand why you’re trying to use flex instead).

what Autoprefixer does , i know , last week a people give me this link …
but autoprefixer({ grid: true }) , to does , it is for me not clear…, now i loss it …

#6

autoprefixer({ grid: true }) (info) is for the PostCSS plugin. Pretty sure it is on by default on the Autoprefixer online site.

#7

Thanks for your suggestion , i found the solution with only Grid … i muss to fight with the Code but i to accomplish it …:smiley:

How my code to show;

body {
 
    display: grid;
    display: -ms-grid; 
   
    background-color: #ebf5d7;
    grid-gap: 5px;
    grid-template-columns: 9% 73% 17%;
  
    grid-template-areas:

      "header   header    header"
      "nav      nav          nav"
      "linkBox  main     infoBox"
      "footer   footer   footer";
     
    -ms-grid-columns: 8% 74% 18%;
    -ms-grid-row:  120px 80px 103px 200px 110px 90px; 
    -ms-grid-gap: 5px;
}
    
    
    

body > header {
	grid-area: 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");
  margin: 2px;
  background-repeat: no-repeat;
  padding: 60px;
    
}

body > nav {
	grid-area: nav;
	-ms-grid-column: 1/3;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;

   background-color: #d2f5c4;
   margin: 1px;

}

body > #externalLinks {
	grid-area: linkBox;
	-ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-row-span: 5;
    grid-template-columns: 1;
    grid-template-rows: 3/4;
    margin: 1px;
    background-color:  #d2f3c6;
	
}
body > main {
	grid-area: main;
	display: block; 
    -ms-grid-column: 2; 
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    margin: 1px;

   background-color: #eaf6e5;
}

body > #furtherInformation {
	grid-area: infoBox;
    -ms-grid-column: 3;
    -ms-grid-column-span: 3;
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
   
    margin: 1px;
    background-color: #d2f3c6;    
}

body > footer {
	grid-area: footer;
	-ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 6;
    -ms-grid-row-span: 6;
    
    background-color: #99ee7a;

}

Screenshot from IE 11

ie_11
ie_111263×776 178 KB

Screenshot from Firefox

firefox
firefox1270×813 265 KB

@lasjorg , now not to need you link , but i will reading it , maybe a Day i need it :wink:

I wish all your a nice weekend !

#8