Django模板中GridLayout未包含for循环生成的全部卡片，如何解决？

你的问题出在HTML标签嵌套/闭合错误：在for循环内部，你提前闭合了外层的.card-grid容器（多写了一个</div>），导致第一次循环后容器就被关闭，后续生成的卡片无法被包含进去。

修正后的代码： #

<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>
{% endwith %}
{% endfor %}
</div> <!-- 把card-grid的闭合放在循环结束后 -->

关键修改点： #

• 移除了循环内部多余的</div>（原代码里循环内的</div></div>，其中第二个错误闭合了card-grid）
• 将.card-grid的闭合标签</div>移动到{% endfor %}的外面，确保所有循环生成的.card都被包裹在这个容器内
• 确认单个卡片的标签结构完整，没有多余或缺失的闭合标签

内容的提问来源于stack exchange，提问作者champa