Automatic Cards reposition after filtering

[alextalamonti]

Test case: http://codepen.io/desandro/pen/osFxj
Hi everybody!
Through Bootstrap Studio and a few lines of PHP, I dynamically generate a series of Cards. I can filter the cards via an input box, but the filtered cards, don't reposition even if some of those are disapiared after filtering....they do, if I change the width of the browser window....is there a way to force them reposition?

I post PHP snippet code and JS function that filters Cards

<div style="padding: 20px;border-radius: 20px;" id="card-list">
                    <div class="row" data-masonry="{&quot;percentPosition&quot;: true }" >
                      <?php
                      //I'm creating Cards list
                      foreach ($arr_fed_NS as $key => $value) {
                        $text_camp=str_replace(']','',str_replace('[','',$value));
                        
                        echo'
                            <div class="col-sm-6 col-lg-4 mb-4">
                                <div class="card">
                                    <a href="table.php?camp=['.$text_camp.']"><picture type="" srcset=""><img class="card-img-top p-3" src="'.$arr_camp[$text_camp].'" style="border-radius: 24px; object-fit: cover"></picture></a>
                                    <div class="card-body">
                                        <h3 class="fw-bolder card-title" style="text-align: center;--bs-body-font-weight: bold;">'.$text_camp.'</h3>
                                    </div>
                                </div>
                            </div>';
                        }
                        ?>
                    </div>
                    <script async="" src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous"></script>
                </div>


function prova(){
    const input = document.getElementById('filter').value.toUpperCase();
    const card = document.getElementsByClassName('card');

    for (let i = 0; i < card.length; i++) {
      let title = card[i].querySelector(".card-body h3.card-title");

      if (title.innerText.toUpperCase().indexOf(input) > -1){
        card[i].style.display="";
      }else {
        card[i].style.display="none";
      }
    }
  }