Grid: Ausrichtung

[Rolf B]

Hallo Gerrit,

der rosa Bereich soll zu dem weißen hinzugeschlagen werden. Warum existiert dieser überhaupt?

Du hast doch geschrieben, dass "text1 img text2" über dem main Bereich zentriert werden sollen. Das kriegt man an am einfachsten hin, wenn man den Kopfbereich genauso breit wie diesen 80% Bereich von main macht. Und dann bleibt der rosa Bereich übrig.

Allerdings bringst Du die Zähne nicht auseinander (bzw. die Finger nicht auf die Tasten), um genau festzulegen, wie die Platzierung von text1/img/text2 erfolgen soll. Da rate ich weiterhin herum.

• soll "img" immer an der gleichen Stelle stehen, egal, wie lang der Inhalt von "x", "text1" und "text2" ist?
• Oder soll der Block "text1 img text2" im Weißraum rechts von "x" zentriert werden?
• Darf der Inhalt des "text2" Elements dabei auch über den 80% Bereich von main hinausragen, wenn die Inhalte länger sind?

Das sind alles Detailfragen, aber die müssen geklärt sein, sonst kann man kein Layout bauen.

Du kannst in meinem Grid-Vorschlag das Template so ändern:

  grid-template: "nav header header" auto
                 "main main rest" auto
                 / 2em 1fr 20%;

Dann würde der Header die Grid-Spalten 2 und 3 überdenken, also den rosa Bereich mit einnehmen. Der Block, der in den blauen Bereich hineinkommt, musst Du mit grid-area: rest dorthin bringen.

Und dann kannst Du experimentieren. Du kannst dem Header einen margin-right geben, du kannst auch für das Grid im Header die Breitenverhältnisse ändern. Im Moment ist text1 und text2 1:1, aber du könntest das grid-template im Header auch als grid-template-columns: 2em 3fr auto 5fr; angeben, dann würden sich die Breiten von text1 und text2 wie 3:5 verhalten, was das Ganze nach links schiebt.

Ich kann Dir nicht sagen, was "am besten" oder "richtig" ist. Jede Variante hat ihre Berechtigung, es hängt nur davon ab, was Du eigentlich willst. Siehe meinen Fragenkatalog am Anfang. Du hast deine Absichten mit "Also etwa so" nur sehr allgemein formuliert.

Rolf