Element im GRID-Container ausrichten

[Matthias Scharwies]

Servus!

Danke euch allen für die Info oder Einwände.

Das wird ja auch schon in dem genannten Beispiel im Wiki erklärt und gezeigt.

Das hab ich 2017 verbrochen und jetzt nur noch nach längerem Überlegen nachvollziehen können.

Ich habe die ersten beiden Beispiele mal ausführlicher erläutert.

Beispiel:CSS-grid-ausrichtung-1.html#view_result

Es gibt keine explizite Festlegung der Höhe der einzelnen Rasterfelder. Anders als in den vorherigen Kapiteln stretchen sich die Rasterfelder aber nicht im/ über den gesamten, verfügbaren Raum.

Beispiel:CSS-grid-ausrichtung-2.html#view_result

Ich wollte, um mal bei dem Beispiel im Wiki zu bleiben, im Element B1 die Schrift unten im Element haben, sodass die Schrift quasi über dem Element B2 zu sehen ist.

Ich habe da noch einige Fragen:

1. Wie groß soll das Element B1 sein?

a. So, dass es sich über das gesamte Rasterfeld erstreckt? Dann musst du im Rasterfeld ein neues Grid aufmachen und ein Kindelement passend positionieren.

b. Nur so groß wie nötig. Dann kannst du es mit align-self: end;am unteren Rand ausrichten (und wie im aktualisierten Beispiel noch drehen.)

2. „über“ oder „oberhalb“?

a. Willst du Rasterfeld B1 über B2 haben? Dann musst du die Felder gezielt positionieren, so wie ich es mit C1 gemacht habe. Da sich das über 2 Rasterfelder erstreckt, müsste man ein Feld in C2 ebenso explizit positionieren.
Hier habe ich eine feste Höhenangabe von 6em verwendet, sonst geht's in Grid Layout eigentlich immer ohne!

b. „oberhalb“ wäre meine Lösung im aktualisierten Beispiel.

Das wäre mal ein Thema für eine Diskussionsrunde am Discord-Stammtisch.

Herzliche Grüße

Matthias Scharwies