grid, 1. areas, 2. text-positionierung

[michaah]

Die genannte Seite ist Ergebnis meiner heutigen Bemühungen grid design zu verstehen.

Das (heutige) Detailproblem bestand eigentlich nur darin, Text in einer Zelle statt links oben eben rechts unten auszurichten (Text "wie und wo").

Versucht habe ich es sowohl mit jusitfy-items+align-items als auch mit position:relative ... um nun nach Stunden festzustellen dass von mir verwendete Chromebrowser (Vivaldi und Chromium) den Text auf Basis einen UA-stylesheets mittels margin-block-start etc. zentrieren (soweit ich das verstanden habe). Jedenfalls ist es mir nicht gelungen diesen Wert zu überschreiben oder sonstwie den Text nach meinen Wünschen zu positionieren. Hilfe dazu wäre nett.

Beim Zusammenbasteln des Beispiels zeigte sich ausserdem, das ich das Grid-design nicht verstehe, obwohl ich mich nun schon länger immer wieder damit befasse. Ich weiß garnicht genau was ich überhaupt fragen soll, weil kaum etwas so funktioniert wie ich es zu verstehen glaubte (und ich habe die entsprechenden Seiten mehrmals durchgelesen):

Ich versteh nicht warum man jede area nochmals individuell definieren muß, obwohl die entsprechenden infos bereits in grid-template-ares enthalten sind. Das Ergebnis ist jedoch ernüchternd, denn die Anordnung entspricht nicht dem Template ... und ich habe keine Idee wo mein Denkfehler liegt. Auch hierzu wäre es nett einen Hinweis zu erhalten.

Gute Nacht erstmal ...