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

[Rolf B]

Hallo beginner,

ja okay, das ist jetzt auch nicht so einfach. Und du hast bisher von Ausrichtung nichts gesagt, deswegen sind wir nun ein bisschen auf dem falschen Dampfer.

Aber eins vorweg: Du hast mit einem margin an den Text-Elementen Platz zwischen den Teilen geschaffen. Kann man machen, ist aber ungeschickt. Weil man zu viel schreiben muss. Es gibt die Eigenschaft gap, die den Abstand zwischen Grid-Zeilen und Spalten definiert. Gib em header gap: 0.5em; und lass die Margins an den p Elementen auf 0.

Zur Spaltenanordnung: Du hast mit einem grid-template aus lauter auto begonnen. Wenn Du alles in der Mitte zusammenschieben willst, dann könnte es sinnvoll sein, dorthin zurückzukehren. Also im Normalformat:

grid-template-columns: auto auto auto;

was man auch als

grid-template-columns: repeat(3, auto);

schreiben kann. Im breiten Layout schreibst du einfach repeat(4, auto);

Dann sind alle Grid-Spalten nur noch so breit wie ihr Inhalt. Theoretisch. In der Praxis ist es so, dass sie nun wegen der Default-Einstellung der Eigenschaft, die nun noch zu ändern ist, in die Breite gezogen werden, bis das Grid ausgefüllt ist (stretch).

Das müssen wir verhindern, und die Spalten in die Mitte (center) schieben. Dazu gibt es einen Schwung von Eigenschaften, die die Ausrichtung beeinflussen. Die beginnen mit justify- oder align- und du findest sie in unserem Wiki: Ausrichtung von Grid-Items. Viel Glück, sind nur 6 zur Auswahl. Bzw. nur 5, weil align-items ja schon verwendet wird und was anderes tut 😉. Man sieht nur grad nichts davon weil die Bilder so klein sind.

Einfach mal den Artikel lesen, dann klappt's auch im ersten Schuss. Die gap-Eigenschaft steht auch auf der Seite.

Die text-align Eigenschaft ist für die p Elemente dann nicht mehr nötig.

Bei den img Elementen wäre es noch eine Idee, nicht die Breite, sondern die Höhe festzulegen. Die Breite passt sich dann an Hand des Seitenverhältnisses an. Durch eine Höhenfestlegung passen die Bilder besser in die Zeile, falls sie unterschiedliche Seitenverhältnisse haben.

Rolf