Ausrichtung von Grid -gute Beispiele gesucht

[Rolf B]

Hallo Matthias,

Beispiel aus dem richtigen Leben - hm. Meine Grids sind zumeist so gestaltet, dass sie den verfügbaren Raum ausfüllen und die Zellen darin so groß sind wie die Grid-Tracks.

Aber das ist ja nicht zwingend so. Und ich meine, man sollte mit den *-content Eigenschaften anfangen. Ein Grid besteht aus Tracks (Zeilen oder Spalten), und wenn diese nicht die ganze Länge ihrer Achse ausfüllen, gibt's Platz. Und für den muss man entscheiden, wo er bleibt. Vorn, hinten, verteilt, es gibt eine Menge Optionen.

Auf diese Weise entsteht ein Haufen von Gridzellen, und in denen können die Grid-Items erscheinen. Wenn ein Grid-Item so groß ist wie seine Zelle, gibt's für die *-items Eigenschaften nichts zu tun. Aber ist das Item kleiner, kann man es links, rechts, oben, unten ausrichten, zentrieren oder strecken.

ANSTELLE das Item zu platzieren, kann man auch den Inhalt des Items verändern. Ich kann einem Grid-Item mit justify-self:stretch die Breite seines Tracks geben und seinen Inhalt mit text-align:right rechts ausrichten. Ich kann aber auch justify-self:end setzen und den Inhalt auf text-align:left lassen. Das hat visuell leicht andere Effekte.

Wie man diesen Variantenreichtum rüberbringt - hm. Ich habe vielleicht eine kreative Idee.

Rolf