Grid-Rätsel

[Gunnar Bittersmann]

Ich habe in diesem Codepen den Grid-Container auf max-height: calc(100vh - 2em) gesetzt. Trotzdem ragen die Grid-Items nach unten aus dem Viewport raus. Warum?

Auf dieser Seite funktioniert das besser.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

Größenberechnungen funktionieren entweder von außen nach innen oder von innen nach außen. Wenn Du Maße angibst, die Rechnungen in beide Richtungen brauchen, scheitern die Browser regelmäßig.

Was ist deine Prime Directive? Dass der main Bereich den Viewport maximal ausfüllt, aber nicht darüber hinausragt?

Dann berechne ihn entsprechend, und lass das Innenleben komplett davon dominieren. Beachte auch die Gaps - wenn dein main Element ein 4x4 Grid ist mit 1em Gap, dann ist der aspect-ratio von main-Element und Gridzellen nicht identisch. Das könnte man ggf. durch gap: 1.6em 0.9em lösen.

Jedenfalls hat die doppelte Angabe von aspect-ratio bei main und picture bei Dir den Effekt, dass die beiden Krieg führen. Scheint mir. Warum es bei den iframes so viel besser geht, hm. Mag an den imgs darin liegen, die intrinsische Größen mirbringen. Ein contain:size könnte helfen, aber der setzt fixe Größen außenrum voraus und die kriegst Du mit max-height nicht. Du müsstest die Höhe explizit aus der Breite berechnen, und du müsstest mit Medienabfragen (sofern die var() enthalten dürfen) sicherstellen, ob die Viewporthöhe oder Viewportbreite das dominierende Element ist. Ggf. gelingt das mit einem container-type:size auf dem Body - keine Ahnung.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Was ist deine Prime Directive? Dass der main Bereich den Viewport maximal ausfüllt, aber nicht darüber hinausragt?

Genau. Das Wohl des Einen (main) wiegt genauso viel wie das Wohl der Vielen (Iframes).

Jedenfalls hat die doppelte Angabe von aspect-ratio bei main und picture bei Dir den Effekt, dass die beiden Krieg führen. Scheint mir.

Ähm, ja. Ich Trottel! Der Ästhetik willen hatte ich das Seitenverhältnis der Planetenbilder vom Fernsehformat auf goldenen Schnitt geändert, das Seitenverhältnis von main aber weiterhin auf der Grundlage von 16 : 9 berechnet.

Im neuen Codepen auf 1.62 geändert – schon geht’s. Fast, jedenfalls: Ein kleines Bisschen ragen die Bilder immer noch aus main raus – aber nicht mehr aus dem Viewport. Wegen der Gaps.

Beachte auch die Gaps - wenn dein main Element ein 4x4 Grid ist mit 1em Gap, dann ist der aspect-ratio von main-Element und Gridzellen nicht identisch. Das könnte man ggf. durch gap: 1.6em 0.9em lösen.

Ähm, nein! Das sähe ja furchtbar aus! Der Ästhetik willen sollten die Gaps horizontal und vertikal schon gleich sein. (Es hat seinen Grund, warum Programmierer nicht das UI designen sollten.)

Die Zutaten zur Berechnung des genauen Seitenverhältnisses von main sollten mit --rows und --columns vorhanden sein. Ich kann aber mit der Näherung leben. Oder ich mach ein „Mathematik zum Wochenende“ draus, dann muss ich nicht selber rechnen. 😆

Kwakoni Yiquan

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ähm, ja. Ich Trottel! Der Ästhetik willen hatte ich das Seitenverhältnis der Planetenbilder vom Fernsehformat auf goldenen Schnitt geändert, das Seitenverhältnis von main aber weiterhin auf der Grundlage von 16 : 9 berechnet.

Im neuen Codepen auf 1.62 geändert

Und, damit das nicht nochmal passiert, jetzt mit single point of truth. Das Seitenverhältnis gehört in eine custom property, deren Wert an beiden Stellen verwendet wird.

Jetzt kann man den Wert auch von 1.62 wieder auf 16/9, auf 1 oder sonstwas ändern – es passt (mit der Ungenauigkeit durch die Gaps).

Kwakoni Yiquan