Первый элемент сетки из фрейма данных pandas не отображается должным образом при использовании Flask/Django

Я новичок в этом деле и пытаюсь отобразить кадр данных pandas в сетке с помощью Django, но первый элемент кадра данных не отображается как элемент сетки.

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})

Я также пробовал использовать flask, но у меня та же проблема. Item1 не отображается должным образом, я пробовал сдвигать индекс так, чтобы он начинался с 1, а не с 0, но это тоже не помогает.

Я понял, что забыл закрыть тег div с классом 'grid-container', из-за чего первый элемент не был включен в сетку, а просто отображался в виде h1, как текст 'Sample Dataframe'.

Исправленный код выглядит так:

<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>
Вернуться на верх