Bild ein-/ausblenden und nicht Diskussion um alt=...

[Rolf B]

Hallo beginner,

dabei könnte es so einfach sein...

Hör mal auf, die Grid-Items einzeln zu positionieren (die ganzen justify-self Angaben). Diese richten das Grid-Item innerhalb der Zelle aus, die vom Grid-Layout vorgegeben wird.

Welchen Browser verwendest Du? Firefox? Chrome? Die haben beide eine Grid-Visualisierung in den Entwicklerwerkzeugen. Drück mal in der Seite F12 - kennst Du das? Nicht? Dann wird's Zeit - ohne diese Tools ist Webentwicklung wirklich ein Ratespiel. Geh in den Inspektor (Elements bei Chrome), klick oben links auf das "Element auswählen" Icon (der Pfeil, der in ein Rechteck hineinzeigt), und dann auf einen Teil deines Grids. Damit wird der Bereich, wo das Grid steht, im Inspektor angesprungen. Hinter <header> steht "grid". Klick da mal auf dieses "grid". Der Browser zeigt Dir dann an, wo genau die Grid-Linien sind, und du erkennst, wo deine Elemente im Grid angeordnet werden. Chrome zeigt auch noch ein paar Zahlen an, das sind die Liniennummern, die Du beim gezielten Anordnen von Elementen im Grid angeben kannst. Das brauchen wir hier aber nicht.

Im Firefox sieht das dann in etwa so aus (ausgehend von deiner Versoin 112):

Daran erkennst Du: Die Spalten sind alle gleich breit, und die Bilder sind innerhalb ihrer Spalten rechts- und linksbündig ausgerichtet.

Das ist die Auswirkung von deinem justify-self:end für's linke Bild. justify-self:baseline hab ich im Leben noch nicht gesehen, keine Ahnung was das hier bewirkt. Letztlich steht das Bild links in der Grid-Zelle.

Aber das willst Du ja nicht, du willst, dass das Grid an sich schmaler wird. Sonst rücken die Bilder nicht an den Text. Und das geht nicht mit -self Eigenschaften, dafür musst Du dem Grid selbst was sagen. Wie gesagt, standardmäßig verteilt der Browser die Grid-Spalten über die gesamte Breite, er macht stretch. Und das muss geändert werden, die Spalten sollen auf ihrer natürlichen Breite bleiben (die Du mit auto oder max-content angeben kannst, das geht hier beides), aber zentriert werden. center hast Du schon gefunden, aber justify-self ist die falsche Eigenschaft für diesen Wert. Guck nochmal ins Wiki, in den Artikel über Ausrichtung, und schau nach "Ausrichtung des Gestaltungsrasters".

Zwischen auto und max-content siehst Du dann einen Unterschied, wenn die Textblöcke mehr Text enthalten und auch die Textmenge unterschiedlich ist.

Rolf