Grid-Rätsel
Gunnar Bittersmann
- css
- grid
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
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
@@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
Ä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