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

[Rolf B]

Hallo Stefan,

eigentlich verstehe ich es auch nicht. Chrome macht es meiner Meinung nach richtig, und der Fuchs zieht das Grid zu groß.

Es KÖNNTE hieran liegen:

Du schreibst im Forum dies:

.sideleft {
     padding: 10px;
     grid-column: span 1;
     grid-row: span 4;
  }
    
    
    .sideright {
     padding: 10px;
     grid-column: span ;
     grid-row: span 4;
  }

aber praktisch hast Du im CSS grid-row: span 6; stehen. Das prpduziert 2 zusätzliche Grid-Zeilen, die von grid-template-rows nicht abgedeckt sind.

Für .sideright solltest Du grid-column: -2 / -1 angeben. Also von der vorletzten Grid-Spaltenlinie bis zur letzten (Spaltenlinien befinden sich am Rand des Grids und zwischen den Spalten).

Für beide .sideXXX solltest Du grid-row: 1 / span 4 angeben, damit sie auch wirklich oben ansetzen.

Aber das erklärt es noch nicht wirklich. Wenn ich mit jsfiddle in Chrome und Fuchs ein ähnliches Grid aufbaue, stimmen die Maße überein. Allerdings habe ich da Platzhalter drin und keine Bilder.

Rolf

[Stefan]

Hi Rolf,

möglicherweise liegt es den Bildern, da zumindest der grüne Kreis quadratisch angelegt ist. Kann ich dem firefox irgendwoe sagen, dass er die Bilder in die Tabelle anpassen soll, anstatt die Tabelle den Bildern?

liebe grüße

[Rolf B]

Hallo Stefan,

okay, ich habe es jetzt.

Deine template-rows sind inkonsistent. Die Summe deiner Prozentwerte ist nicht 100. Und darum ist das gesamte Grid größer als deine 4 Rows. Firefox und Chrome scheinen damit unterschiedlich umzugehen.

Wenn Du möchtest, dass die beiden oberen Rows 3/4 der Höhe der beiden unteren Rows haben, dann sag ihm das: grid-template-rows: 3fr 3fr 4fr 4fr;. Du kannst natürlich auch 22% und 28% nehmen (ca. 3/14 und 4/14), aber die fr Schreibweise finde ich verständlicher. Soll sich der Browser doch ausrechnen, was 100% sind.

Und du solltest, wenn Du eine maximale Höhe für das Grid haben willst, das auch spezifizieren: max-height: 55em; zum Beispiel, das entspricht in etwa dem was Chrome zur Zeit anzeigt. Statt einer absoluten Größe kannst Du auch sagen, dass das Grid 80% der Fensterhöhe haben soll: max-height: 80vh;.

Deine Hover-Elemente führen zu weiterer Verwirrung. Sie sind im ausgeblendeten Zustand durchsichtig und werden dann opak und nach oben geschoben. Aber solange Du nicht hoverst, führen sie zu eine rechnerischen Vergrößerung der Rows. Ändere folgendes ab:

.main figure {     /* neue Regel */
   overflow:hidden;
   position: relative;
}
figcaption {       /* abändern */
   position: absolute;
   bottom: -2em;
}
figure:hover figcaption {   /* abändern */
   bottom: 3em;
}

Das stellt sicher, dass die Captions nur in ihrer Row angezeigt werden. Durch das position:absolute (vorher war's relative) belegen sie im Layout keinen Platz und gehen nicht in Größenrechnungen für das Grid ein. Und das position:relative an der figure sorgt dafür, dass die Captions darin relativ zur figure positioniert werden. Die bottom-Angaben musst Du auch etwas anpassen; vorher hingen die Captions unter den Bildern, jetzt sitzen sie Unterkante an Unterkante in der Figure.

Ich hoffe, ich habe jetzt alle Änderungen aus meiner lokalen Kopie dargestellt :D

Rolf

[Stefan]

Wow, dankeschön dafür. ich bin zwsichenzeitlich auch auf die Prozente gestoßen, dass hier ein fehler ist und habe das Grid auf vw/vh umngestellt. Damit sah es dann gleich aus im Fuchs und im Chrome.

Die Grid Höhe max-height will er mir für das ganze Grid nicht abnehmen. Wo schreibe ich dir rein?

Ansonsten kann ich in jede figure eine max-height setzen, bin mir aber sicher dass dies auch eleganter geht.

Vielen Dank!

[Rolf B]

Hallo Stefan,

so geht's natürlich auch:

@media (min-width: 640px) {
  main {
    display: grid;
    grid-template-columns: 10vw 20vw 20vw 20vw 20vw 10vw;
    grid-template-rows: 15vh 15vh 20vh 20vh;     
  }
}

aber ich meinte das hier (mit repeat für Spaltenwiederholung). Wenn man max-height angibt, müssen die template-rows natürlich relative Angaben sein.

@media (min-width: 640px) {
  main {
    display: grid;
    grid-template-columns: 1fr repeat(4, 2fr) 1fr;
    grid-template-rows: 3fr 3fr 4fr 4fr;    
    max-height: 70vh;
  }
}

Rolf

[Stefan]

Vielen Dank! 😀