First grid item from a pandas dataframe isn't displayed properly when using Flask/Django

I'm kind of new to this and I'm trying to display a pandas dataframe in a grid using Django, but the first item of the dataframe is not displayed as a grid item.

Dataframe: | Index | Title | | -------- | -------- | | 0 | item1 | |1 | item2 | |2|item3|

html template:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            }
            .grid-container{
                display: grid;
                grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
                gap: 16px;
            }
            .grid-item{
                border: 1px solid #000000;
                padding: 10px;
                text-align: center;
            } 
    <body>
        <div>
            <h1>Sample DataFrame</h1>
                <div class = 'grid-container'    
                    {% for product in html_data_df %}
                        <div class = 'grid-item'>
                            <h1>{{product.Title}}</h1>
                        </div>
                    {% endfor %}
                </div> 
        </div>
    </body>
</html>

views.py:

def display_products(request):
    

    data_df['Image_HTML'] = data_df['Image_link'].apply(lambda x: f'<img src="{x}" width="100">')


    html_data_df = data_df.to_dict(orient='records')

    return render(request, 'price_comp/display_products.html', {'html_data_df': html_data_df})

I've also tried using flask, but I am getting the same problem. Item1 is not displayed properly, i've tried shifting the index so that it starts on 1 instead of 0, but that doesn't work either.

I realised that I had forgot to close the div tag with the class 'grid-container' which caused the first item to not be included in the grid, but simply displayed as a h1, like the text 'Sample Dataframe'.

The corrected code is this:

<body>
    <div>
        <h1>Sample DataFrame</h1>
            <div class = 'grid-container'>   
                {% for product in html_data_df %}
                    <div class = 'grid-item'>
                        <h1>{{product.Title}}</h1>
                    </div>
                {% endfor %}
            </div> 
    </div>
</body>
Back to Top