How to place images in the same row in a masonry layout after filtering them with checkbox?

I am building a project with laravel. The layout is pretty similar to the Pinterest layout (also known as masonry) and it shows different types of rooms:

The layout was implemented in such a way that the images are placed in horizontal order. To do that I followed this tutorial.

This is the code for the layout:

HTML:

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    <div class="grid products-by-room" data-masonry='{ "itemSelector": ".grid-item"}' style="margin-top: 8rem">
        @foreach ($rooms as $room)
           <div class="grid-item" data-category="{{ $room->data_category}}" style="border: 7px solid #fff">
               <a href="#zoomImg{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#zoomImg{{ $room->id }}">
                   <div class="img-wrapper">
                       <img src="{{ $room->img }}" alt="" class="img-fluid shade">
                           <div class="overlay">
                           <i class="fa fa-search-plus icon"></i>
                       </div>
                   </div>
               </a>
               <div class="text-left mt-3 mb-5">
                   <p class="product-subtitle">{{ $room->name }}</p>
                   <h4 class="product-title">Shop the Look</h4>
                   <a class="product-price-link" href="#getPriceByRoom{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#getPriceByRoom{{ $room->id }}">get price</a>
               </div>
           </div>
       @endforeach
    </div>

CSS:

  .grid-item img {
    width: 100%;
    font-size: 0;
  }

  .grid-item {
    width: 100%;
  }

  @media (min-width: 768px) {
    .grid-item {
      width: 33.333%;
    }
  }

I created a filter that displays only the rooms that are checked, but it is not working as I intended. It does filter the rooms correctly, but it leaves a lot of empty spaces around them.

This is the filter:

HTML:

<div class="modal-backdrop-filters"></div>
        <div id="mySidenav" class="sidenav">
            <div class="top-header-filters">
                <h3 class="title-filters">FILTERS</h3>
                <a id="closebtn" class="closebtn filter-close-btn">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                    style="border: none; background-color: #fff;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </a>
            </div>
            <div class="header-filters">
                <h4 class="title-filters">Categories</h4>
            </div>
            <div class="round" id="r-group">
                <form>
                    <label class="label-filter" style="margin-top: 3rem;"><input type="checkbox" name="room" value="office"><span class="label-text"> Office</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="bedroom"/><span class="label-text">Bedroom</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="living-room"/><span class="label-text">Living Room</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="dining-room"/><span class="label-text">Dining Room</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="library"/><span class="label-text">Library</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="hallway"/><span class="label-text">Hallway</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="kitchen"/><span class="label-text">Kitchen</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="bar"/><span class="label-text">Bar</span></label><br>
                    <label class="label-filter"><input type="checkbox" name="room" value="entryway"/><span class="label-text">Entryway</span></label><br>
                </form>
              </div>
            <button id="applyBtn" class="apply-filters-btn">APPLY</button>
        </div>
    </div>

SCRIPT:

$(function(){
        $('form').find("input").on('change',function(){
            let selected = [];
            $('form').find("input").each(function(){
                if(jQuery(this).is(":checked")){
                selected.push(jQuery(this).val());
                }
            })
            if(!selected.length){
            $(".products-by-room > div").show();
            return;

            }
            $(".products-by-room > div").hide();
            $(".products-by-room > div").each(function(){
                const category = jQuery(this).attr('data-category');
                const categorySplitted = category.split(' ');
                categorySplitted.forEach((cat)=>{
                if(selected.indexOf(cat) !== -1){
                jQuery(this).show();
                }
                });
            });
        });
    });

The problem is, when I select a room such as "dining room" this is the result I get, the images are shown in their original spot and lots of white spaces aroun them:

This is the result I intended, all dining rooms in the same row, with no spaces around:

Is there a way I can achieve this? Thanks in advance!