Wieder ein megaeinfaches Problem, doch ich finde den Fehler nicht.

Ein Grid, welches bisher einwandfrei tat, was es soll, ist plötzlich, 1000 %-ig ohne Veränderung nicht mehr in der Lage, Elemente nebeneinander darzustellen. Denn das dritte Element (kopfspalte3) verkrümelt sich immer außerhalb dieser Darstellung!

Konkret:

  <div class="kopf">
    <div class="kopfspalte1"><img src="bild1.jpg"></div>
    <div class="kopfspalte2"><img src="bild2.jpg"></div>
    <div class="kopfspalte3"><img src="bild3.jpg"></div>
  </div>

wird mittels

.kopf { display: grid; grid-auto-flow: column; }

Bisher wurden (vorbehaltlich genug Platz) die Bilder nebeneinander gezeigt. Wegen 'auto' sogar egal wie viele Bilder DIVs man hineinbaute.

Jetzt aber rutscht das dritte Element außer- und unterhalb des Grids!

Aha, der Browser zeigt DIV kopfspalte3 ausserhalb (!!!) von kopf ! 😱

Das sieht dann in den Browser-Tools so aus:

  <div class="kopf">
    <div class="kopfspalte1"><img src="bild1.jpg"></div>
    <div class="kopfspalte2"><img src="bild2.jpg"></div>
  </div>
<div class="kopfspalte3"><img src="bild3.jpg"></div>

Wie kompass???

Und wie repariert man das nachhaltig? So, dass dieses Dokument in ein paar Wochen, Monaten Jahren auch noch so aussieht? Gibt es stabilere Grid Codes als den?

PS: Auch mit fix definierten grid-template-columns 1fr 1 fr 1fr oder mit auto auto auto das Gleiche Bild: Ein DIV tanzt aus der Reihe