Firefox vs chrome / CSS grid

[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