Firefox vs chrome / CSS grid

[Stefan]

Liebe community,

ich versuche gerade eine Homepage zu erstellen, auf der Basis von responsiven CSS Grids. Es funktioniert eigentlich auch wunderbar, allerdings gibt es ein Proble, welches ich gerne erst lösen möchte, bevor ich weiter mache..

Firefox interpretiert die Homepage grundlegend anders Google Chrome: Ich hätte gerne in beiden Fällen, dass die grüne box im Grid oben, mitte immer im gleichen verhältnis ist. firefox macht dies bei mir "fast" quadratsich.

hier das css:

main { display: grid; grid-template-columns: 20% 15% 15% 15% 15% 20%; grid-template-rows: 15% 15% 25% 25%;

und hier die boxen:

die boxen sind entsprechend sortiert:

.sideleft {
     padding: 10px;
     grid-column: span 1;
     grid-row: span 4;
  }
    
    
    .sideright {
     padding: 10px;
     grid-column: span ;
     grid-row: span 4;
  }
    
  .info1 {
        padding: 10px;
        grid-column: span 1;
        grid-row: span 2;
        margin: 20px;
       
      
  }
  
  .info2 {
    grid-column: span 2;
      padding:10px;
      margin: 20px;
      
  }
 
.info1, .info2 {
    background-color: white;
    
    border: #66c2ff 1px solid;
}
    
    .figure1, .figure2, .figure3, .figure4, .figure5, .figure6, .figure7, .figure8 { 
        padding:5px;
    }
    
    
  .figure1 {
    grid-column: span 2;
    grid-row: span 2;
      }

.figure3 {
    grid-column: span 1;
    grid-row: span 1;
      }

  .figure6 {
    grid-column: span 2;
  }
  .figure7 {
    grid-column: span 1;
  }
    
    .figure8 {
    grid-column: span 1;
  }

Kann mir jemand einen Tip geben?

Vllt ist in dieser Struktur auch irgendwo ein Denkfehler...

Vielen Dank!

Stefan