Django中CSS网格布局问题：视频与标题无法正确排版

修正后的HTML代码 #

<div class="next">
    {% for course in courses %}
        <div class="course-card">
            <video src="/media/{{ course.videofile }}" controls type="video" class="video">{{ course.title }}</video>
            <div class="course-title">{{ course.title }}</div>
        </div>
    {% endfor %}
</div>

修正后的CSS代码 #

.next{
    margin-top: 8em;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); /* 后续新增视频自动适配换行 */
    gap: 1em;
}
.course-card{
    border: 1px solid black;
    padding-bottom: 2em; /* 为标题预留空间 */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.video{
    width: 100%; /* 视频占满卡片宽度 */
    max-width: 15em; /* 限制视频最大宽度 */
    margin-bottom: 0.5em; /* 视频与标题间增加间距 */
}
.course-title{
    text-align: center; /* 标题居中显示 */
    padding: 0 0.5em; /* 避免标题超出边框 */
}

关键改动说明 #

1. 结构调整：将每个课程的标题和视频统一放入course-card容器，让单个课程成为独立网格项，彻底解决排版混乱问题；同时调换视频与标题的顺序，实现视频在上、标题在下的布局。
2. 样式迁移：把原video元素的边框、底部内边距属性移到course-card上，确保标题处于边框内部的预留空间中。
3. 布局优化：改用自适应网格列配置，后续新增视频时会自动换行，无需手动调整列数；给视频和标题增加细节样式，提升整体视觉效果。

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