Killua: Ein DIV im Grid tanzt aus der Reihe

Beitrag lesen

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