Items stack on top of each other on the initial load until I resize

[Oluwaseun Oyebade]

Items stack on top of each other on the initial load until I resize

[Emmanuel Olaojo]

You need to set place the image in a div whose height is equal to the height of the image. That way, the grid item will always be the correct height even if the image loads slowly.

[guillermohs9]

Sorry for necrobumping, I'm using the library for a dynamic number of images, but I'm facing the same issue as OP, even after setting the height of the div the same as the image it contains.

<div id="container-imagenes">
    {% for i in inmueble.imagenes_inmueble %}
        <div style="height:{{ i.thumb_height() }}px;">
            <a href="{{ url_for('static', filename='uploads/' + i.filename) }}"><img src="{{ url_for('static', filename='uploads/' + i.thumbnail) }}"></a>
        </div>
    {% endfor %}
</div>

thumb_height() is a method that returns the image height in px from the backend

I'm initializing the grid like this:

let magicGrid = new MagicGrid({
    container: "#container-imagenes", // Required. Can be a class, id, or an HTMLElement.
    items: {{ inmueble.imagenes_inmueble | length }},
    animate: true // Optional.
});
    
magicGrid.listen();

but images appear stacked until I resize the window and the grid starts working. Am I missing something?
Thx