Also versuche ich, CSS Grid zu verwenden, um eine Pinterest-ähnliche Bildergalerie zu erstellen. So können unterschiedlich hohe Bilder nebeneinander stehen und jedes Bild kann leeren Raum einnehmen. Aber alle Beispiele, die ich gesehen habe, fügen jedem Bild basierend auf der gewünschten Höhe unterschiedliche Klassen hinzu, wohingegen ich Bilder dynamisch aus der Datenbank hinzufügen möchte.

Ich habe Folgendes versucht:

<div className=‘gallery’>
<img className=‘image’> </img>
<img className=‘image’> </img>
<img className=‘image’> </img>
<img className=‘image’> </img>
</div>

Meine CSS-Datei:

.gallery{
max-width: 80vh;
display: grid;
grid-template-columns:repeat(3,1fr);
}

.image{
max-width: 200px;
height: 100%;
object-fit: cover;
}

Aber die kleinen Bilder sind also in derselben Reihe und die großen Bilder in einer anderen Reihe, und ich möchte, dass sie zufällig sind.

Gibt es eine Möglichkeit, dies zu erreichen, ohne für jedes Bild eine andere Klasse hinzuzufügen?