Frage zum Wiki-Artikel „Maßangaben“

[Rolf B]

Hallo nix,

das Thema hatten wir neulich bei dieser 3×5 Bildergalerie. Der TO wollte die Breite der Bilder als 1/N der Fensterbreite bestimmen, die Höhe der Bilder als 2/3 ihrer Breite und die Höhe der Galerie aus Bildhöhe und Anzahl Bildzeilen.

Denn nur, wenn die Größe der Galerie festgelegt ist, funktioniert die Methode, durch Vergrößern eines Bildes die zugehörige Gridzeile und -s palte expandieren zu lassen.

Das ließ sich mit einer Breitenberechnung durch "100%" nicht lösen, weil % in der Richtung ermittelt werden, in der sie benutzt werden (also wenn ich im custom property --breite irgendwas mit calc(100% + bla - blub) stehen habe und --breite dann in der Höhenberechnung einsetze, beziehen sich die 100% auf einmal nicht mehr auf die Breite, sondern auf die Höhe, und alles geht kaputt).

Man hätte 100vw verwenden können statt 100%, aber das hatte Nachteile.

• 100vw beinhaltet auch den vertikalen Scrollbar der Seite und die Margins des Body - man hat also eine Menge zu Rechnen und die Scrollbarbreite bekommt man mit CSS-only nicht heraus. Glaub ich…
• Die Galerie kann die Viewportbreite einnehmen, aber grundsätzlich muss das nicht so sein

Deshalb habe ich den Body zum inline-size Container gemacht (oder man macht es mit dem Element, das die Galerie enthält) und berechne die Bildbreite über cqw. Damit kann ich dann auch die Höhe berechnen, ohne dass mir die Maßeinheit kaputtgeht.

Ohne Container-Units hätte ich ansonsten wohl JavaScript gebraucht. Zumindest habe ich es anders nicht hinbekommen…

Für ein einzelnes tatsächlich nutzbares Grid lohnt sich IMHO der (Lern-)Aufwand rund um diese „modernen Layout-Features“ nicht.

Wie oft noch? Wenn Du uns nicht zeigst, was Du machst, kann Dir keiner sagen, ob Du eine Dusseligkeit eingebaut hast oder das Feature dusselig ist. Code Inspection ist das Mittel, mehr über seine eigenen Fehler zu lernen. Weiß ich genau. Ist mir oft genug passiert.

Rolf