GridLayout не содержит сгенерированных карт в цикле for

Я хочу сделать gridlayout карточек в html, который хранит кучу карточек, сгенерированных с использованием информации, которую я извлекаю из базы данных. project_photo - это массив путей к файлам изображений, которые используются для генерации карточек в цикле for. Однако, когда я его запускаю, макет сетки (с именем card-grid) содержит только первую карточку, сгенерированную в цикле for. Есть ли способ сделать так, чтобы она содержала все карточки, сгенерированные в цикле for?

 <div class="card-grid">
{% for project in context %}
{% with 'jweb/images/'|add:project.image as project_photo %}
    <div class="card">
         <h2 class="card-header" style="text-align:center">{{project.title}}
            <div class="card-image">
              <img  src="{% static project_photo %}" style="float:left">
            </div>
        </h2>  
            
    </div>
    </div>
</div>

Вернуться на верх