自动调整网格中的图像以适应屏幕宽度 - 删除右侧空白区域

Question

我正在wordpress页面中创建一个图像网格，以便在网格中显示帖子缩略图。我已将它们显示在网格中，但我尝试的每个选项都会在右侧创建多余的空白。图像将移动到下一行，而不是调整大小以适应宽度。

这是我索引页面上的网格：

<div id="grid">
                    <div class="container-fluid">
                        <div class="row">
                            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                                <a href ="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php echo get_the_post_thumbnail( $thumbnail->ID, 'large' ); ?></a>
                            <?php endwhile; else : ?>
                                <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
                            <?php endif; wp_reset_query(); ?>
                        </div>
                    </div>
                </div>

我使用的唯一特定CSS是图像上的5px填充。

.attachment-large {
padding: 5px !important;
}

我已将大缩略图大小设置为最大宽度：400和最大高度：230。 这使得所有图像的高度相同，但仍然在列中的右侧留下空白区域。

我已经安装并激活了jQuery Masonry Image Gallery插件。它提供网格但仍然留下空间。我尝试了另一个Masonry插件，但它做了同样的事情。

你知道如何摆脱这个空间吗？