Inside the post div, there will be multiple post rows. Each row contains maximum 4 posts. So when there are 5 posts there comes the problem with responsiveness. First 4 posts (first row) will respond to the screen size but the 5th post (second row) does nothing because there are space left for the 5th post.

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

Is there any way to make all the posts will maintain the same size when it respond to the screen size?

Output 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>