Wir haben das Grid-Layout für die Galerie eingerichtet. Leider ist das Laden etwas abrupt und unordentlich. Das liegt daran, dass CSS3-Spalten so konzipiert sind, dass sie Inhalte gleichmäßig auf die einzelnen Spalten verteilen. Bilder brauchen jedoch manchmal einen Moment zum Laden und haben noch keine Breite/Höhe. Wenn sie dann erscheinen, müssen sich die Spalten neu organisieren.
Ich denke, wir können dieses Durcheinander mit etwas JavaScript verhindern. Da wir die Höhe und Breite der Bilder kennen, können wir eine Box mit dem richtigen Seitenverhältnis erstellen, um sie dort als Platzhalter einzufügen. Wenn das Bild geladen ist, ersetzen wir den Platzhalter durch das Bild.
Am Ende des Videos sind wir auf dem richtigen Weg, aber es ist noch etwas fehlerhaft. Keine Sorge, wir werden es im nächsten Video beheben.
Ich weiß, dass du es in eine etwas andere Richtung gesteuert hast, aber nur zur Information: Die Divs fließen zur nächsten Spalte, da das Teil des Zaubers von Spalten ist (weil der Text einfach in die nächste Spalte fließt).
Es gibt eine Eigenschaft
column-break-inside: avoid;, die helfen könnte, aber die Unterstützung ist unzuverlässig (siehe Notizen auf caniuse).