CSS Grid Layout on WordPress Category Page - php

Question

I have created a grid to display posts on a WordPress site. The grid works great and scales to different devices using minmax and auto-fit, but the problem I'm having is that the last 2 spots in the grid on each page are always empty even if I have more posts that can fill the space. For example, on this category page: https://2ndactcostumes.com/category/fans-collars-belts/
I have two pages of posts, but space is being wasted at the bottom of the first page. Any ideas on how to remedy this? Thank you!!
(edited)
Category.php code:
<?php get_header(); ?>
<div class="page-wrapper">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<h1><?php the_archive_title( '' ); ?></h1>
<hr />
<div class="article-container">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();?>
<?php get_template_part( 'template-parts/content-posts-costume' ); ?>
<?php endwhile; else : ?>
<?php get_template_part( 'template-parts/content', 'none' ); ?>
<?php endif; ?>
</div>
<?php echo paginate_links(); ?>
</main>
</div>
</div>
<?php get_footer(); ?>
Template-parts code:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h2>', '</h2>' ); ?>
</header>
<div class="entry-content">
<?php the_post_thumbnail( $size = 'thumbnail' ); ?>
<?php the_excerpt(); ?>
</div>
</article>
CSS for the grid:
.category main .article-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
grid-template-rows: repeat(auto-fill, 1fr)
justify-content: space-between;
}