Frage zum Wiki-Artikel „Grid-auto-rows“

[nix]

Das Beispiel scheint mir nicht zu demonstrieren, wofür (hier; an ähnlichen Stellen ist’s vmtl. nicht anders) grid-auto-rows steht. Denn: inwiefern würde es sich denn von grid-template-rows: : 200px 500px 200p; unterscheiden?

Damit hier dann auch eine (die?) Frage steht: wie, mit welchen Ausnaßen, wächst das Grid, wenn die implizite Erzeugung ansteht?

[Rolf B]

Hallo nix,

ich habe grid-auto-rows (und grid-auto-columns) überarbeitet. Besser?

Rolf

[Matthias Scharwies]

Servus!

Das Beispiel scheint mir nicht zu demonstrieren, wofür (hier; an ähnlichen Stellen ist’s vmtl. nicht anders) grid-auto-rows steht.

Doch, die implizit erzeugten Reihen haben jeweils 8em und 16em Höhe, was sich bei weiteren Reihen wiederholt.

Probier's doch mal aus, bevor du fragst.

Denn: inwiefern würde es sich denn von

grid-template-rows: : 200px 500px 200p; unterscheiden?

Grad ausprobiert:

1. Du hast zwei Doppelpunkte und ein fehlendes x am Ende - ich behaupte, dass 90% deiner Fragen durch Rechtschreibfehler entstehen.

2. Es werden 3 Reihen mit den angegebenen festen Werten gebildet. Die weiteren Reihen erhalten eine automatisch erzeugte Höhe, die eben nicht festgelegt ist, was aber völlig ok ist. Man kann dem Browser vertrauen, dass er es so gut wie möglich rendert!

Default: none = none

Is a keyword meaning that there is no explicit grid. Any rows will be implicitly generated and their size will be determined by the grid-auto-rows property.^[1]

Damit hier dann auch eine (die?) Frage steht: wie, mit welchen Ausnaßen, wächst das Grid, wenn die implizite Erzeugung ansteht?

Wenn nicht weiter festgelegt, so wie der auto-placement-Algorithmus es berechnet.

Es geht (bei uns) in Leserichtung von links nach rechts und dann von oben nach unten. Wie viel Pixel das sind, soltest Du dem Browser überlassen, da jedes Gerät anders ist.

Herzliche Grüße

Matthias Scharwies

---

1. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows ↩︎

[Rolf B]

Hallo Matthias,

Die 8em und 16em waren mein Stand des Beispiels. Vorher stand da 100px 200px 100px und da ist beim Kopieren möglicherweise ein x verloren gegangen.

Die Frage von nix war insofern berechtigt, als dass im Artikel nicht stand, dass grid-auto-rows sich wiederholt, wenn mehr Zeilen automatisch erzeugt werden als Werte angegeben sind.

Und die Interaktion von grid-template-rows und grid-auto-rows hatte ich noch nicht auf dem Schirm. Das bau ich noch ein.

Die Angabe von min-content oder max-content ist für grid-auto-rows übrigens nur dann interessant, wenn man Zellen mit Inhalt in vertikaler Fließrichtung hat. Denn diese Angaben beziehen sich auf die intrinsische Größe des Inhalts, und der einzige Inhalt, der eine veränderliche intrinsische Größe hat, ist meines Wissens Text. Oder überseh ich da was? Deswegen find ich mein Beispiel mit 8em 16em besser, das illustriert das Wiederholmuster.

Rolf