如何让响应式布局下的所有帖子保持统一尺寸？

帖子容器.posts内包含多行.post-row，每行最多容纳4个帖子。当存在5个帖子时出现响应式问题：第一行的4个帖子会随屏幕尺寸调整大小，但第二行的第5个帖子因为剩余空间充足，不会跟着调整，导致和其他帖子大小不一致。

当前使用的Django模板和CSS代码如下：

<div class="posts">
    {% if post %}
        {% for media in post %}
            {% if forloop.counter0|divisibleby:"4" %}
                <div class="post-row">
            {% endif %}
            <a id="post-wrapper" href="{% url 'sh-media' %}?pid={{media.pid}}">
                <div class="thumbnail-container">
                    <img src="{{ media.media_thumbnail.url }}" class="post-thumbnail">
                    <div class="gradient-overlay">
                        <h2 class="video-caption">{{ media.caption}}</h2>
                        <p class="video-description">{{ media.descr }}</p>
                    </div>
                </div>
            </a>
            {% if forloop.counter0|add:"1"|divisibleby:"4" or forloop.last %}
                </div>
            {% endif %}
        {% endfor %}
    {% endif %}
</div>

<style>
    .posts{ 
        display: flex;
        flex-direction: column;
        color: #fff;
        padding-top: 15px;
        justify-content: flex-start;
    }
    .post-row{
        display: flex:
    }
    #post-wrapper{
        margin: 20px 10px;
    }
</style>

渲染后的HTML结构：

<div class="posts">
    <div class="post-row">
                        
        <a id="post-wrapper" href="/watch-profile%23ed-media?pid=060">
            <div class="thumbnail-container">
                <img src="/static/images/9_16%20Video.png" class="post-thumbnail">
                <div class="gradient-overlay">
                    
                        <h2 class="video-caption">sea breeze</h2>
                        <p class="video-description">Winter morning sweet music</p>
                    
                </div>
            </div>
        </a>
        
    
        
        <a id="post-wrapper" href="/watch-profile%23ed-media?pid=bea">
            <div class="thumbnail-container">
                <img src="/static/images/9_16%20Audio.png" class="post-thumbnail" >
                <div class="gradient-overlay">
                    
                        <h2 class="video-caption">Winter</h2>
                        <p class="video-description">Winter morning sweet music</p>
                    
                </div>
            </div>
        </a>
        
    
        
        <a id="post-wrapper" href="/watch-profile%23ed-media?pid=ba8">
            <div class="thumbnail-container">
                <img src="/media/media/Thumbnails/DSC_0354.JPEG" class="post-thumbnail">
                <div class="gradient-overlay">
                    
                        <h2 class="video-caption">Thousand years</h2>
                        <p class="video-description">A Thousand Years, a romantic song about the fear of falling in love, is a sleeper hit.</p>
                
                </div>
            </div>
        </a>
        
    
        
        <a id="post-wrapper" href="/watch-profile%23ed-media?pid=731">
            <div class="thumbnail-container">
                <img src="/media/media/Thumbnails/martin-blaszkiewicz-fv8YJZ471kQ-unsplash.jpg" class="post-thumbnail">
                <div class="gradient-overlay">
                    
                        <h2 class="video-caption">Aurora Runaway</h2>
                        <p class="video-description">a song by Norwegian singer-songwriter Aurora</p>
                
                </div>
            </div>
        </a>
                        
    </div>
                        
    <div class="post-row">
                        
        <a id="post-wrapper" href="/watch-profile%23ed-media?pid=46e">
            <div class="thumbnail-container">
                <img src="/media/media/Thumbnails/_c5eea445-cb7b-4aaa-8a8c-74a43e3c6561-transformed.jpeg" class="post-thumbnail">
                <div class="gradient-overlay">
                    
                        <h2 class="video-caption">KungFu Panda</h2>
                        <p class="video-description">4k video of kungfu panda</p>
                
                </div>
            </div>
        </a>
                        
    </div>
                        
                    
                
</div>

问题根源在于手动拆分post-row的方式，加上没有给帖子设置固定尺寸规则，导致单行只有一个帖子时会占满可用空间。可以通过以下两种方式解决：

方法一：用Flex布局简化结构，去掉手动分栏 #

直接让.posts作为flex容器，设置自动换行，同时给每个帖子设置固定比例宽度，确保所有帖子尺寸一致：

修改后的Django模板（移除手动分row逻辑） #

<div class="posts">
    {% if post %}
        {% for media in post %}
            <a class="post-wrapper" href="{% url 'sh-media' %}?pid={{media.pid}}">
                <div class="thumbnail-container">
                    <img src="{{ media.media_thumbnail.url }}" class="post-thumbnail">
                    <div class="gradient-overlay">
                        <h2 class="video-caption">{{ media.caption}}</h2>
                        <p class="video-description">{{ media.descr }}</p>
                    </div>
                </div>
            </a>
        {% endfor %}
    {% endif %}
</div>

修改后的CSS #

.posts{ 
    display: flex;
    flex-wrap: wrap; /* 自动换行 */
    gap: 20px; /* 统一控制帖子间距，替代margin */
    color: #fff;
    padding-top: 15px;
    justify-content: flex-start;
}
.post-wrapper{
    flex: 1 1 calc(25% - 20px); /* 每行4个，减去gap宽度 */
    min-width: 200px; /* 屏幕过小时的最小宽度，防止帖子过窄 */
    max-width: calc(25% - 20px); /* 强制最大宽度，避免单行帖子占满空间 */
}
.thumbnail-container{
    width: 100%;
    aspect-ratio: 16/9; /* 固定缩略图比例，可选 */
}
.post-thumbnail{
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，填充容器 */
}
/* 保留原有的gradient-overlay样式 */
.gradient-overlay{
    /* 你的渐变遮罩样式 */
}

方法二：保留原row结构，强制帖子宽度比例 #

如果必须保留手动分row的逻辑，只需修改CSS，给每个帖子设置固定比例：

修改后的CSS #

.posts{ 
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #fff;
    padding-top: 15px;
    justify-content: flex-start;
}
.post-row{
    display: flex;
    gap: 20px;
}
.post-wrapper{ /* 把id改为class，ID不能重复使用 */
    flex: 1 1 calc(25% - 20px);
    min-width: 200px;
    max-width: calc(25% - 20px);
}
.thumbnail-container{
    width: 100%;
    aspect-ratio: 16/9;
}
.post-thumbnail{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

• 不要重复使用ID：原代码中#post-wrapper被多次使用，违反HTML规范，必须改为class.post-wrapper。
• flex属性控制尺寸：flex: 1 1 [宽度]确保帖子在空间充足时保持固定比例，空间不足时可缩小；max-width强制限制最大宽度，避免单行帖子占满容器。
• 可选：固定图片比例：aspect-ratio能让所有缩略图保持统一比例，提升页面视觉一致性。

内容的提问来源于stack exchange，提问作者Benet Paul Benny